Hippo Paint

My three year old niece likes to sit in front of Google Image Search and look at pictures of dinosaurs (and frankly, who doesn't?). Every once in a while there's a coloring book style picture and she wants to paint it. The best I could come up with on short notice was to print out the picture and give her crayons. But obviously there had to be a better way.

Enter Hippo Paint.



It should work in all modern browsers (it even works in IE9). While making this I could clearly see that JavaScript engines in browsers really are getting faster (for example there's a big difference between Firefox 3.6.x and 4.0), but you still have to make all the trivial optimizations like function inlining or common subexpression elimination by hand.

I also encountered an interesting bug that only manifested itself in Opera. I had a piece of code that looked something like this:

var img = new Image();
img.onload = function() { /* ... */ };
img.src = '...';

And sometimes the onload handler function wasn't getting called (even though I could see that the image was successfully fetched from the network). After a frustrating debugging session I noticed that it only happened when fetching the image took longer than usual (say, more than a second). It turns out that it gave Opera's garbage collector enough time to kick in and collect my img variable. I don't know if other browsers don't have as aggressive garbage collectors or if they think that the existence of an event handler is enough to mark the variable as still needed. Anyway, the solution was simply to move the variable to an outer scope.

I hope you and your kids have as much fun using Hippo Paint as I had making it.