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.

Similar posts

More by Jim

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

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