I draw this cloud by drawing four white circles.

To animate the cloud, I create a looping timer that redraws my picture every 50 milliseconds, moving the cloud four pixels to the right each time. To track the cloud’s position, I store its x-coordinate in a variable. When the cloud’s x-coordinate reaches 740, I reset it back to -100.

Draw a new frame every milliseconds.

Move the cloud pixels to the right every frame.

Frame: ; Cloud x-coordinate:

Even though I’m only animating the cloud, I’m also redrawing the sky above the flowers and the sun for every frame. That’s because, on <canvas>, there’s no way to move or erase something once we’ve drawn it—all we can do is draw over it. I’m basically redrawing the sky above the flowers and the sun to cover up the current cloud, and then drawing in a new cloud four pixels over.

Draw a random cloud.