Skip to content

Latest commit

 

History

History
62 lines (50 loc) · 2.17 KB

README.md

File metadata and controls

62 lines (50 loc) · 2.17 KB
Raw

Doodle-js

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://github.com/billyist/doodle-js.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

Reference API
Some Examples

Questions? Mailing list: http://groups.google.com/group/doodlejs
Or, ask me on Twitter: http://twitter.com/billyist

From hello-world.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #display { width: 400px; height: 400px; }
    </style>
  </head>
  <body>
    <div id="display"></div>
    <script src="./build/doodle.js"></script>
    <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;
        });
      });
    </script>
  </body>
</html>