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.

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.

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.