Canvas technology can be used targeting mobile devices either as web page applications or as mobile apps using technologies such as Apache Cordova. It allows integration of images, audio & video so the range of applications is wide and can range from e-learning to advertisement and games. Since it is supported by default from the browser as a HTML5 standard and it doesn’t need any external plugins to be installed, it makes a perfect choice any interactive needs.

Canvas technology is a HTML5 element that can be used to draw graphics via scripting in JavaScript. It also allows adding images, video, audio and interact with event clicks. It has been around for over a decade, but it grew popular only recently.

Why Use Canvas

Unlike Flash and Silverlight, Canvas is a W3C standard with no need to install additional plugins. It is the same as HTML, CSS and JavaScript, running by default in the browser.

• • Interactivity.
    Canvas is fully interactive through JavaScript. It can respond to a user’s actions by listening to keyboard, mouse, or touch events. Every object drawn on the canvas can be animated. Even though it doesn’t give the feeling of nativeness, the general performance is satisfying for most usages and projects.

• • Flexibility.
    It can display lines, shapes, text, images, etc.; adding video and/or audio is also possible.

• Browser/Platform Support.
  HTML5 Canvas is supported by all major browsers and can be accessed from desktops, tablets, and smartphones – once created a canvas application can run almost anywhere (unlike Flash and Silverlight). HTML5 Canvas offers great portability from desktops to mobile devices. Even though not all of its features are implemented in all browsers, developers can be certain that canvas will be a supported standard indefinitely.

Browser canvas supports.

Another advantage of using canvas is that it is rendered by the GPU (graphic card) of the device and not from the processor. This allows for distribution of resources in the device as the processor can handle other tasks (like clicks, scrolling, tabs, DOM manipulation etc.) while the GPU is rendering the objects in canvas.

Unlike elements in the DOM, canvas objects are drawn in the canvas only if they are positioned in the visible area, therefore keeping the canvas lightweight. Usually, even if an element is at the bottom of a long webpage and the scroll is on the top, it still has to be loaded as a part of the page, making it heavy.

Another interesting feature is the possibility to use WebGL API, a JavaScript library that allows access to the GPU for image processing, part of the HTML5 canvas element. It gives even more possibilities and greater performance with particle systems, allowing the rendering of thousands of particles at the same time.

Canvas on Mobile

Most recently, the idea to use canvas in hybrid apps with Cordova and frameworks & services like cocoon, playcanvas, babylonjs, threejs has been very attractive to many developers – a trend not limited to mobile web apps. There are many known issues with older Android versions, but the Crosswalk Project takes care of these problems by providing a unified version of WebView, based on the most recent Google Chromium version. Therefore, if you test it in your device and works, you can be sure that it will work in all the users’ devices.

Even React Teams of Facebook and Flipboard experimented with the possibility of creating mobile applications based on canvas, as the react-canvas project shows. Even the idea of a reactive DOM in ReactJS came from canvas concepts: to recreate the whole DOM tree each time an event happens but redraw only those sections and nodes that have changed. This was a revolutionary implementation, in contrast to the concepts of AngularJs 1.x, which constantly observes variables for changes. Now Angular 2.x has also adopted those same concepts into their framework.

Most Common Usages

• • Gaming.
    Canvas is one of the best candidates for producing 2D games, 3D games also supported; BabylonJs and ThreeJs are two of the top frameworks in the market.

• • Data Representation.
    It’s easily creatable interactive graphs and charts with the canvas element, ex. Chart.js & CanvasJs. CanvasJS for example claims to be 10x faster than conventional Flash or SVG libraries, resulting in lightweight, responsive dashboards.

• • Advertising.
    It’s a great replacement for Flash-based banners and ads. A fancy example of its usage in interactive advertisement can be the presentation of BMW i8, Renault Espace, superstar wrestler John Cena or the interactive video of Just A Reflektor of Arcade Fire.

• • Education and Training.
    HTML5 canvas can be used to produce effective and attractive learning experiences, combining text, images, videos, and audio. Canvas LSM is a good example of how to provide such a service.

• Image Editors and Arts.
  It’s really suitable for creating online image editors for social media or interactive art projects. FabricJs, literallycanvas, miniPaint.

For more examples and inspirationon what can be done with this technology, check chrome experiments and their mobile section.