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.
Why Use Canvas
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.
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.
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
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.
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.