The HTML5 Canvas element promises web developers a web-native way to create animations, interactive charts and even full-fledged apps like image editors and complicated games. Canvas may well be the best thing about HTML5. But unfortunately, it can be kind of a pain to work with, especially for those coming from a Flash animation background.

Easel JS is a JavaScript library for working with the HTML5 Canvas element. It was created by developer Grant Skinner and his cohorts at gskinner.com. Skinner is probably best known for his work in Flash, and the Easel Library adds a number of tools that make Canvas a bit more approachable for Flash developers (and everyone else as well).

Canvas’ biggest drawback (compared to Flash or SVG) is that it has no internal concept of display objects. That means you have to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical display list and helper classes to simplify working with Canvas.

Easel JS is currently an alpha release, so proceed with caution. The code is available under the MIT license and full documentation can be found on the docs page. Skinner says that, once Easel reaches the beta stage, the code will be moved to GitHub and opened for outside contributions and improvements.

See Also:

• Building Better HTML5 Games With Canvas
• Tips and Tricks for Better HTML5 Canvas Animations
• Google and Arcade Fire Get All HTML5y