How to draw sprites on an HTML canvas

In my previous post I animated a “walk cycle” as a GIF. In today’s post I animate the walk cycle as a “sprite sheet” drawn on an HTML canvas. Here’s the finished canvas:

This animation is generated from the following PNG image. The PNG contains four sprites for the cat walk cycle, plus a background that we will draw under the cat.

This uses the ctx.drawImage method of HTML canvas 2D context. drawImage can take an Image object as the source; we give it an Image which has loaded the PNG. This looks like:

const canvasEl = document.getElementById("canvas");
const ctx = canvasEl.getContext("2d");
const imageEl = new Image();
function draw(sx, sy, w, h, dx, dy) {
  ctx.drawImage(imageEl, sx, sy, w, h, dx, dy, w, h);

Instead of relying on GIF for animation, we use window.requestAnimationFrame in a loop, and window.setTimeout to control the frame rate:

imageEl.addEventListener("load", () => {s
  function loop() {
    // draw() here ...
    window.setTimeout(() => window.requestAnimationFrame(loop), 100);

At each frame, we clear the canvas, then draw the background, then draw the cat:

ctx.clearRect(0, 0, SPRITE_W, SPRITE_H);
const bgX = - ((frameNum * SPRITE_SPEED_PX) % BG_W);
draw(0, SPRITE_H, BG_W, BG_H, bgX,        0);
draw(0, SPRITE_H, BG_W, BG_H, bgX + BG_W, 0);
draw(SPRITE_W * (frameNum % SPRITE_NUM_FRAMES), 0, SPRITE_W, SPRITE_H, 12, 0);
Tagged #programming, #animation, #web.
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2018. Content is not associated with my employer. Found an error? Edit this page.