Hey, have you ever heard of canvas? No? Well, if you’re paying attention to web trends, you’re about to. Canvas is an HTML tag like any other, but it serves a specific purpose: it is a “drawable region,” basically the code equivalent to a blank painter’s canvas. Developers can use JavaScript to draw colors, shapes, and images to a canvas. In many ways it’s similar to Flash, but unlike Flash, canvas is built into the browser, which means no third-party plugins are needed.

Canvas was first introduced in 2004, but adoption by developers was slow over the first few years of its life: browser support wasn’t great in the beginning and everyone already had the Flash plugin installed, so there was no real reason to move to a new technology. But things have changed. Currently 94% of all browsers worldwide have support for canvas — including mobile browsers (yes, even the iPhone!). Canvas is moving into prime time, and you’re going to start seeing it more and more often. The three industries below are already embracing this new trend.

Gaming

Image Credit: Epic Games

Image Credit: Epic Games

If you played a game on the web 10 years ago, there’s something like a 99.99% chance that game was written in Flash. Today, more and more web-game shops are moving to canvas as their platform of choice.

Many popular game making software packages already have an export-to-canvas option. In fact, Epic Games (developers of the Unreal engine that powers AAA titles like Batman: Arkham Origins) recently announced that their latest Unreal 4 game engine exports directly to canvas. What does that mean? In another year or two, you’ll be playing games as pretty as Borderlands 2 or Mass Effect directly in your browser.

Advertising

Advertisers love their Flash banner ads. And it’s hard to argue with success: animated ads simply work better on average than their static counterparts. Of course, Flash has its downsides: for starters, most mobile phones don’t support Flash, and with mobile accounting for a huge and increasing proportion of pageviews, Flash ads miss a lot of eyeballs.

Enter canvas. It works across the board: desktop, tablet, mobile phone. Google has recently started encouraging the move away from Flash-based advertising by automatically converting ads from Flash to canvas. Soon most animated ads will simply be written in canvas to skip this conversion step.

Mobile

And speaking of mobile, canvas has become a great tool for developing native mobile apps. Not only does canvas work in mobile browsers, but there are lots of tools that convert canvas applications to honest-to-goodness native applications that can be sold in app stores and installed on phones.

Take CocoonJS, for example. Developers can build their game/application/whatever in canvas, in a regular browser window (so it will already run in all modern browsers). Then when they’re ready to take the next step, the developer can simply use CocoonJS to creative true native application versions for iPhone, Android, Kindle Fire and many others.

cocoonjs_cloud

Flash-to-Canvas

If all that isn’t enough to demonstrate that canvas is the medium of the modern web, check this out: even Flash is jumping on board. Flash Professional now has an “export to canvas” option. This allows Flash developers to continue working with a tool they’ve spent years mastering, while still producing canvas applications that run in modern browsers.