I've been trying to find an answer for a while but most searches return results for animating shapes not frame animation. Given a canvas with a 2d context to which I draw sprites with drawImage, what's the most efficient way to create multiple frames for an animated image? I'm looking for something like animated gif but using canvas, where I have a number of frames (eg: 4) with a fixed rate (eg: 500 ms) and I paint different tiles on each frame.

I need this for a tileset engine I thought of prototyping: The canvas is static by default, to support animated tiles like water you'd need multiple frames. The most obvious solution feels like having multiple canvas elements and showing / hiding them in order, but I'd like to check if there's a more efficient way, in case canvas supports multiple layers or CSS might work.

I've been trying to find an answer for a while but most searches return results for animating shapes not frame animation. Given a canvas with a 2d context to which I draw sprites with drawImage, what's the most efficient way to create multiple frames for an animated image? I'm looking for something like animated gif but using canvas, where I have a number of frames (eg: 4) with a fixed rate (eg: 500 ms) and I paint different tiles on each frame.

I need this for a tileset engine I thought of prototyping: The canvas is static by default, to support animated tiles like water you'd need multiple frames. The most obvious solution feels like having multiple canvas elements and showing / hiding them in order, but I'd like to check if there's a more efficient way, in case canvas supports multiple layers or CSS might work.

• html
• html5-canvas
• sprite
• game-development
• game-engine

2 Answers 2

If you want to animate multiple frames efficiently in an HTML5 , you don’t need multiple canvas elements. Instead, you can update a single canvas by drawing different frames at regular intervals.

Efficient Approach: Using requestAnimationFrame + setInterval The best way to handle this is:

1. Load your sprite sheet (or individual frames).
2. Keep track of the current frame.
3. Use setInterval to update the frame at a fixed rate.
4. Use requestAnimationFrame to continuously render the updated frame.

Here’s an example:

<canvas id="gameCanvas" width="200" height="200"></canvas>
<script>
   const canvas = document.getElementById("gameCanvas");
   const ctx = canvas.getContext("2d");
   
   const spriteSheet = new Image();
   spriteSheet.src = "sprite.png"; // Your sprite sheet containing all frames
   
   const frameWidth = 64; // Width of a single frame
   const frameHeight = 64; // Height of a single frame
   const totalFrames = 4; // Total frames in the animation
   const frameRate = 500; // Change frame every 500ms
   
   let currentFrame = 0;
   
   spriteSheet.onload = () => {
       setInterval(() => {
           currentFrame = (currentFrame + 1) % totalFrames;
       }, frameRate);
   
       animate();
   };
   
   function animate() {
       ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous frame
   
       ctx.drawImage(
           spriteSheet,
           currentFrame * frameWidth, 0, frameWidth, frameHeight, // Source from sprite sheet
           0, 0, frameWidth, frameHeight // Draw onto the canvas
       );
   
       requestAnimationFrame(animate);
   }
</script>

Why This Works Well

• Uses a single canvas, avoiding unnecessary DOM elements.
• requestAnimationFrame ensures smooth performance.
• Works with both sprite sheets and individual frames.
• Keeps static and animated tiles separate in a tile-based engine.

If you’re working on a tile-based engine, you can store animation states for different tiles and only update the ones that need it.

I'm not an animation expert, but I've used Canvas a lot; it's super fast for most use cases, so using multiple canvases probably won't help you.

From what I know, the answer to your question depends on two things: (1) whether or not the animated images are appearing in the same place, and (2) whether they are translucent or opaque.

If they're stationary and opaque, just redraw them in place on a 500ms timer; if they're translucent (alpha < 1.0), then you have to draw something over the last one before you draw the next one so the images don't blend together.

If they're moving, then you have to redraw the original background in the old place before you draw the next image in the new place. This can be arbitrarily complex depending on what else you're drawing on the canvas.

For simple drawings, redrawing the entire canvas every frame can be fast enough; for more complex stuff, perhaps not.