HTML5 Canvas Sprite Animation Library

Fri, Sep 14, 2012 - 8:49pm -- Isaac Sukin

I just pushed a powerful new HTML5 Canvas Sprite Animation library to Github. At its simplest:

    // Create the sprite.
    var sprite = new Sprite('sprite.png', {
      frameW: 60,
      frameH: 60,
      postInitCallback: function() { // Runs when the sprite is ready.
        // Start animating.
        sprite.startLoop();
      },
    });
 
    // Draw the sprite. You should do this every time you repaint the canvas.
    // Frames update automatically.
    // var context = document.getElementById('canvas').getContext('2d');
    context.drawLoadedImage(sprite, 100, 100); // x and y position on canvas

There are many more options you can use for finer-grained control, including using multiple animation sequences on one sprite sheet. See index.html for a full example.