Today was interesting. I knew at some point I'd need to put leaves on the tree, but how to do it efficiently? I can't draw animated sprites for each stage of the tree, I also can't write all their positions out, both those solutions would take forever.
The solution I came up with was to draw certain colored pixels on the tree sprites where I want the leaves to be placed. When the texture is loaded, I extract it's pixel data and read it, building an array of all the pixel positions of that certain color on the texture sheet. I then compare all these "leaf positions" with the sprite positions and build an array of leaves relative to each sprite. I then overwrite the special colored pixels to restore the normal color, so it's all 2-colors again.
So now, even on a huge sprite, I just plot green pixels where I want leaves and in the game I can draw animated leaves on it. I can also draw a variable number of the leaves, which is perfect for the "incremental" idea, and actually seeing your growth/progress.
Here's what it looks like in practice, Day 2:
I was going to rotate the sprites to animate them, but HTML canvas interpolates them when doing that (even though imageSmoothingEnabled = false! :/). But I think I prefer just this movement anyway, now I see it.