Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

npm version

Sprite.js is a powerful, easy-to-use Sprite animation library for HTML5 Canvas.

Two classes are provided:

  • SpriteMap: Manages multiple animation sequences in a sprite sheet.
  • Sprite: Handles a single animation sequence.

You can read the full documentation for a complete explanation of every available method.


Put the script in your HTML document:

<script src="sprite.min.js"></script>

There are several ways to use sprite.js. 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.

// Draw the sprite. You should do this every time you repaint the canvas.
// Frames update automatically.
// var context = document.getElementById('canvas').getContext('2d');
sprite.draw(context, 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 of using a SpriteMap or read the full documentation.


Sprite images are cached by default. If you would like to use an alternative caching system, you can override several static methods:

  • Sprite.preloadImages(files, options): Pre-load images into the cache so you don't have to deal with a delay to load them from disk later.
  • Sprite.getImageFromCache(src): Retrieve an image from the cache.
  • Sprite.saveImageToCache(src, image): Save a loaded image into the cache.


Created by Isaac Sukin (IceCreamYou).

The centipede-sprite.png image used for the demo is from Atari.

All resources are MIT licensed: