Brief Overview of HTML5 Canvas Libraries

HTML5 Canvas is a good example of immediate graphics. This "draw and forget" way of working is enough for some purposes. For instance you could write a simple drawing application this way. Unfortunately it isn't entirely trivial to implement interactive applications on top of Canvas without some decent effort. It gets more complicated when you are dealing with a lot of objects and you have to consider performance.

This is where various libraries wrapping the Canvas kick in. I will concentrate on a few popular ones in this post. You can find various others at our canvas wrapper category. In addition you might be interested in checking out various visualization libraries and those focusing on image manipulation.


{{ screenshot: EaselJS }}

EaselJS is an example of a library inspired by Flash. You will gain hierarchical display list, interactivity and animation helpers there. The concept of display list is quite powerful. It allows you to define relationships between graphical objects. As you manipulate parent objects, these manipulations are propagated to the children as well.


{{ screenshot: Paper.js }}

As you might want sometimes a whole scene graph (or as we call it on web development side, Document Object Model), you could complement EaselJS with AtelierJS. Paper.js actually implements scene graph as a core feature. This allows you to split objects on multiple layers within the same Canvas. Sometimes you might get away with using multiple Canvas elements and CSS z-index but that's not what you want always.

Interestingly paper.js comes with a language of its own, PaperScript. As you probably know dealing with math can be sometimes a bit painful in JavaScript as you cannot overload operators easily. Instead your code ends up looking like v1.mul(v2.add(v3)) which doesn't parse particularly well. PaperScript solves this and provides a couple of custom objects.


{{ screenshot: Fabric.js }}

Just like EaselJS, Paper.js comes with its own interactivity helpers. Fabric.js provides support for interactivity as well and comes with its own Object model as these libraries usually do. The specialty of Fabric.js seems to be its SVG-to-Canvas parser. Interestingly this applies to the other direction too!


{{ screenshot: KineticJS }}

KineticJS seems more or less comparable to libraries mentioned already. It's specialty is that it uses multiple canvas elements internally to achieve better performance. @softrLi seems quite excited about it in his comparison of Canvas libraries. Probably for a good reason.