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.

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.

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.

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!

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.

Comparison

  EaselJS Paper.js Fabric.js KineticJS
License

MIT

MIT

MIT

MIT or GPLv2

Size

65k

219k

79-148k

67k

Modular no no yes no
SVG Parser no

nightly

yes

partial

IE<9 no no yes no
Node.js no

nightly

yes no
Links

Official Site, Documentation, Demos

Official Site, Documentation, Demos

Official Site, Documentation, Demos

Official Site, Documentation, Demos (at bottom)

Conclusion

The libraries discussed here are just a tip of the iceberg. @kangax has compiled a more comprehensive listing with more data. In this post I wanted to focus specifically on a limited selection to give you a some idea of what sort of capabilities these libraries commonly provide.

How do you choose one then? It depends a lot on what your goals are. Perhaps give a couple a go and see if the syntax sticks. If you happen to need something really special like SVG support, Fabric might be the way to go.

Published by bebraw on 2013-01-11 15:38:00

More to read

Comments