Courtesy Jack Franklin,Netmagazine
If you’re new to the canvas element, I highly recommend you become familiar with it before using a library to make it easier. Knowing how to do something the hard way will make you write better code, even when using a library. Remy Sharp wrote a good introduction on HTML5 Doctor that should get you started, and links to more resources once you’ve worked through the introduction.
Raphael is a small library designed to simplify working with vector graphics on the web. It also allows for complex charts and visualisations and works by drawing SVG elements. One plus to Raphael is that it has better browser support, supporting IE6 and above, whereas Bonsai and D3 don’t support older versions of Internet Explorer. However, one negative to Raphael is that the source code was last updated 11 months ago, so it’s a little outdated. Raphael remains a very capable library and is certainly worth looking over. One of my favourite demos is Ben Barnett’s Tube Map, which recreates the famous London Underground tube map with Raphael, with really demonstrates the power of the library (screenshot below).
Three.js is something very different to the three libraries I’ve discussed so far. Three.js is used to create 3D graphics, often through WebGL. It’s capable of incredible things, such as this sports car (pictured below) but as it is resource intensive and uses WebGL, browser support is obviously limited right now. You’ll need a good knowledge of 3D graphics to work efficiently with Three.js. However, there are good tutorials out there, including a good introduction to the library. Three.js implements shaders, cameras, animations and loads more.
If you’re after a library that acts more as a wrapper around working with the canvas element,EaselJS may be more up your street, particularly if you’d like to build some games. It’s capable of recreating the classic Asteroids game or allowing users to draw onto a canvas. Easel comes with comprehensive API documentation. EaselJS took a lot of inspiration for its class names from Flash, so if you’re familiar with Flash, you’ll find Easel even easier to pick up.
Picking the right tool