Very nice!

I changed it a little bit to optimise rendering just in case you don't know about 'requestAnimationFrame()' (https://developer.mozilla.org/en-US/docs/Web/API/window/requ...):

https://jsfiddle.net/65q7c5to/

It's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.

Works fine on chrome, but it seems too fast on firefox.

What do all the context transformation lines do in this example? It seems to work just as well with clearRect on its own.

There's only one such line. In general it's a good idea to reset the transform before clearing as the (0, 0, w, h) rectangle may not cover the whole canvas anymore. In this toy example there obviously isn't another transform so it's without function.

Wonderfurl! It makes the kid see how a small algorithm saves time AND produces almost the same results as hand drawn animation. I have to try this myself with my own kids.

Absolutely! Assuming your 5 year old is some kind of savant. Otherwise, I can't imagine a kid actually understanding what is going on with a script like this.