What’s the future of HTML5 Canvas?


Since its creation by Apple in 2004, the HTML5 Canvas element has increasingly become woven into the fabric of the web.


Simply put, Canvas provides us with an environment in which to create art and graphics with JavaScript. Some of the things we can do with Canvas include building games, plotting interactive charts and manipulating video, but the areas that I’m interested in focusing on are drawing in 2D, manipulating images and rendering 3D graphics. Unlike SVG, Canvas is resolution-dependent which means that it renders its contents with pixels not vectors and outputs raster images instead of code. Because of this Canvas can be more efficient, such as when rendering many objects at once and animating with the ‘requestAnimationFrame’ method.

At a basic level, Canvas is supported by all modern browsers and Google’s ExplorerCanvas allows developers to build for pre-IE8. That said, support for some other functionality like CSS drawings, is varied. While Chrome’s DevTools previously had a Canvas inspector tool, it was removed last year and this was briefly detailed in a Chromium bug report ( This was probably the result of a phenomenon called ‘Canvas fingerprinting’ in which advertisers can exploit the Canvas element to profile a user’s graphics card and track their online activity. Firefox has retained its Canvas tool set for debugging animation frames, which is especially useful when building games and visualisations.

The future

A-Frame and Mozilla’s larger MozVR initiative are especially exciting because they represent the first major push from a large tech organisation towards bringing virtual reality to the web.

While one should always take tech predictions with a pinch of salt, we have no doubt that the internet and Canvas will play a huge role in the way virtual reality evolves. With the growing computing power of our smartphones, rising internet speeds and a new evolving standard for ‘progressive web apps’, the barriers to bringing VR to the world’s three billion internet users will soon be significantly lower. Not only does Canvas’ speed (especially with requestAnimationFrame) make it the ideal candidate for building such VR experiences, but with JavaScript’s popularity also rising, there’ll be no shortage of talent with whom to build them.

Virtual reality will allow companies to design advertising that connects with customers on a very personal level. For example, clothing retailers might use VR to help customers visualise themselves wearing a piece of clothing before buying it.

Canvas’ role in virtual reality may not change drastically in the next few years however, but as we figure out what VR means to us and the way we interact with the web, we’ll see new JavaScript frameworks rise up. Within the context of the web itself, designers and developers will continue to add interactivity in different ways, and there’s potential that will continue.