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);
  }
  window.requestAnimationFrame(loop);
});

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);

More by Jim

Tagged #programming, #animation, #web. All content copyright James Fisher 2018. This post is not associated with my employer. Found an error? Edit this page.