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.
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.
It's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.
This is great. Thank you both for these fiddles. I've been doing a lot of SVG DOM stuff. Mostly tied to maps. I'm excited to try this out.