Adding animation
Sprite animation works just like a flip-book or a movie. Show a sequence of images fast enough, where each image is drawn to be only slightly different than the previous one, and it causes the illusion of motion. Animation on the canvas works in much the same way, where each frame in the sprite sheet has the same effect as a drawing in a flip-book:
Figure 2.7 – The run animation for Red Hat Boy
To draw Red Hat Boy running, we have to simply draw the images in order, one at a time, and loop after drawing the last one. Simple for a loop, right?
Of course, it's not quite that simple. First, we can't just use an infinite loop, as that would block the browser from any processing, resulting in a frozen browser tab. Second, we have to make sure to clear the canvas between each frame. Otherwise, we'll see all the images merged together as one draws on top of the other. So, each time we draw the canvas, we'll need...