Once I have my drawStickman and animateStickman subroutines, I can use them to pose and animate stickman in all kinds of ways. And I’m not limited to simple animations. If I create a sequence with five key frames, I can draw stickman doing cartwheels.

(Frame A)

(Frame B)

(Frame C)

(Frame D)

(Frame E)

I can even use those subroutines in other drawings and drop stickman in a field of flowers. If you look closely, you’ll see that stickman is doing his cartwheels between the fourth and fifth rows of flowers. I accomplish this by animating the scene with layers. There are actually four layers in the scene and one offscreen <canvas> so that I can make my cloud translucent.

One of the most powerful features of <canvas> is its ability to package drawings into subroutines. It makes reusing drawings easy. It also makes it easy to revise and improve drawings. For example, if I improve my drawStickman subroutine later, I can apply those improvements instantly to all of my old drawings. And if we take it one step further and design our subroutines to create new drawings by passing them new inputs—like we’ve been doing with the number fields in these demos—then we can tweak our drawings to our heart’s content and even create posable stick figures.