Skip to content
A JavaScript animation library for HTML5 Canvas.
Branch: master
Clone or download
Latest commit 6db5193 Dec 23, 2011
Type Name Latest commit message Commit time
Failed to load latest commit information.
build node: asserting with global vars is dumb. Jun 13, 2011
lib Updated README to markdown. Removed submodule nonsense, just include … Apr 7, 2011
src node: asserting with global vars is dumb. Jun 13, 2011
BSD-LICENSE.txt Reset! Doodle-js v0.1 source archive added to downloads section. Aug 1, 2010

This project is currently inactive, but feel free to fork and contribute.
I continue to reference the code in this project a lot, and in fact Doodle.js lead directly to the book Foundation HTML5 Animation with JavaScript, the examples can be found here: The difference being that the book does not use any external libraries, just JavaScript and the Canvas API, while Doodle.js implements some of the ActionScript API since I came over from the Flash world. Personally, I now just add these methods as needed instead of importing the entire library, but your preference my differ.
In summary, while the code here can be useful, if you are just beginning to animate with the canvas, I'd suggest you take a look at the examples in the html5-animation repo, and buy the book to get a better understanding how they work ;)


A JavaScript Animation Library for HTML5 Canvas.

Tested on Chrome/WebKit, looking good on Firefox 4.
Requires a browser with support for HTML5 Canvas and some ECMAScript 5 capabilities.

Some of the features:

  • Use the Canvas drawing API with sprites and a scene graph.
  • Event handling and dispatch for objects.
  • Nodes maintain transforms, bounds, and other useful properties.
  • A clean api with a focus on good JavaScript style.
  • Influenced by ActionScript 3, jQuery, Node.js, and JSLint.
  • Easy to add to an existing page element where Flash no longer displays.
  • Integrated runtime information provided by Stats.js.

Basic build instructions (minified version with the Closure Compiler installed):

git clone git://
./build/make-doodle => ./build/doodle.js

Debugging version (type-checking and some useful error messages):

./build/make-doodle -D => ./build/doodle-debug.js

For more options: ./build/make-doodle -h

From hello-world.html:

<!doctype html>
    <meta charset="utf-8">
      #display { width: 400px; height: 400px; }
    <div id="display"></div>
    <script src="./build/doodle.js"></script>
      doodle.ready(function () {
        var display = doodle.createDisplay('#display'),
            text = doodle.createText("Hello, World!").appendTo(display);
        //center text
        text.x = display.width / 2;
        text.y = display.height / 2;
        //game loop
        display.on('animationFrame', function () {
          text.rotation += 4;
You can’t perform that action at this time.