Doodle.js
I’ve written a few posts about canvas-based animation and graphics libraries lately. Before moving on to another topic I thought I’d mention Doodle.js, which is a sprite-based canvas library. Doodle.js simplifies working with the canvas, and includes excanvas for IE support.
Code using Doodle.js looks like this:
(function(oo) {
oo.canvas('#my_canvas');
var box = oo.rect({x:25, y:25,
width:50, height:50, fill:"#ff0000"});
box.draw(); //draw a red box with initial parameters
box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
box.modify({fill:'purple'}).rotate(-45).draw();
box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
})($doodle);
As you can see, the API is fairly clean. There isn’t currently much documentation, but the author has written a length blog post with examples.
While Processing.js is a full drawing and animation system, and Raphael is a vector graphics library, Doodle.js provides a simple way of working with sprites.
