How to use HTML5 Canvas as a next-gen animation tool

Nowadays websites are becoming heavier not only because of the data they are handling, but to give the user a beautiful and innovative UI experience. This is done with heavy animations using CSS and JS, which make the DOM very heavy. It also brings in many problems, some of them being browser compatibility and support for various form factors.

We do have Flash but it has many drawbacks, major ones being the requirement of a plugin to view the flash content, different language to code in (ActionScript) and no libraries available for faster development.

So do we have any alternatives?

Yes, we do – HTML5 has come in with a lot of cool things to enhance the browser.

Canvas and SVG are two such awesome elements which allow you to add crisp native animations on your website. 

Although these elements are powerful, both have their pros and cons:

Canvas vs SVG

Canvas is the Photoshop and SVG (Scalar Vector Graphics) the Coreldraw of web animation.

What is Canvas?

Canvas, as wiki says, actually started off as an experimental project by Apple for use in the Safari browser, which was then adopted by other browsers. Canvas, as the name suggests, is a drawing board for the web. Any command given is rasterized and painted on the board using webGL (Web Graphics Library).

After a canvas is painted, the fact that it was drawn is forgotten by the system. If its position is to be changed, the entire board needs to be redrawn, including all the objects inside it. The commands or the object data can be stored in an in-memory data structure, which can then be used to redraw the canvas. This is typically called a scene-graph.

One can draw on this board in two ways:

1. 2D context – Basic animations, infographics, etc.
2. 3D context – Advanced animations, games, etc.

But it is under experimentation, not yet standardized.

In this article, I will be talking only about the 2D context of the canvas.

So where can one USE this?

• Rich UI components, e.g. – zebkit
• Scalable image manipulation, e.g. – camanJS
• Animated backgrounds, e.g. – falling snow effect
• Data visualization, e.g. –  canvasJS
• Responsive banner ads in a canvas instead of flash, e.g. – bannerflow
• Online Document editing, e.g. –  onlyoffice
• Photo compositions real-time video processing or rendering.
• Games, e.g. –  canvasengine

Scene graph

A scene graph is basically a data structure commonly used by vector-based graphics editing applications and modern computer games, which arranges the logical and spatial representation of a graphical scene.

A simple scene graph can be an Array or Linked list data structure, while a more complex one can be a Tree.

A Composite design pattern is used which creates a hierarchical representation of group nodes(transformations and operations) and leaf nodes (objects).

Collision detection

Collision detection can simply be explained as checking for the intersection of an object to any other object or with a mouse cursor (hover). This is usually calculated via linear searches. It is one of the basic operations used in creating games.

Bounding box algorithm is the simplest collision detection technique. It can be implemented as follows –

Do I need an external canvas library?

The native canvas API is low level and may sometimes be difficult to read and understand. For people who want to avoid the intricacies and hop directly onto the sweet things, an external library is a way to go. But people who wish to learn more can first experiment with the native API and figure out whether an external library is needed.

Many libraries such as fabricJS, kineticJS, paperJS, easelJS, etc are available which provide additional features on top of the canvas API. Like JQuery is a wrapper around javascript, likewise these are wrappers for canvas. Most of these libraries maintain a scene-graph for the canvas element which makes your job even easier.

Browser support

Native support for – Mozilla Firefox, Google Chrome, Internet Explorer(>=8), Safari and Opera.

Plugins available for – Internet Explorer (<8).

In conclusion, the Canvas element has gained a lot of notice from developers. Its easy integration into any website and usability as a widely used image element are the key factors. With the cool things that Canvas provides, it is definitely the next-gen animation tool for the web.

Protip – try creating a game using the Canvas element, working around the various roadblocks on the way and thus getting a better understanding of the intricacies.

By

Vineet Ahirkar