(Flip book animation)

There are multiple ways to animate a cloud floating across the sky. One strategy is to use <canvas> as a flip book: draw one picture, and then draw a new picture over it. If we do that quickly, animations look smooth and we don’t notice any redrawing. I use this strategy to animate the cloud above my field of flowers. I’m redrawing the sky, sun, and cloud every 50 milliseconds, or 20 times per second.

(Layered animation)

Show the top <canvas>

A second strategy is to use layers. If we position one <canvas> on top of another, we can draw the sky and the sun on the bottom <canvas>, and then we can repeatedly erase and redraw the cloud on the top <canvas>. By using layers, we don’t have to keep redrawing the sky and the sun.

(Layered animation with positioning)

Show the top <canvas>

A third strategy is to continue using layers, but instead of redrawing the cloud on the top <canvas>, we can simply draw the cloud once and tell the browser to move the whole <canvas>. After all, we’re just moving the cloud across the screen.

So, which strategy is better? Well, that’s a tricky question to answer—it really depends on what we’re animating. When I test the cloud animation on my computer, the third strategy is a little faster than the others: it takes the browser 4.60 milliseconds to redraw the sky, sun, and cloud every frame; 4.54 milliseconds to erase and redraw the cloud; and 4.49 milliseconds to move the top <canvas>. But, if I was moving two clouds separately at the same time, the first or second strategies might be faster. And speed is not the only consideration. I also have to think about which strategy is easier to maintain and update as I make changes and improvements.

My advice is to play with multiple strategies. You’ll get a sense of their strengths and weaknesses over time, and you’ll begin to develop a deeper understanding of the underlying technologies. This, in turn, will give you a better framework for your decision making.