Animating your canvas paintings

You’ve seen some basic animations using canvas throughout this chapter, but I wanted to explain some of the concepts in detail here.

Simple animation is mostly about clearing the current canvas state and drawing the whole thing again. This is very quick to do, as the canvas is a native drawing API. I’ll show you a demo that takes Bruce’s bouncy head and bounces it around the canvas area. This example is based on the canvas breakout tutorial by Bill Mill, but I jazzed it up with Bruce’s mug bouncing instead of a solid black ball.