So I wrote Canvas snow. Canvas is effectively a pixel buffer, and I decided that the best strategy to render the snow would be to blank the canvas and redraw all the snow (and the ground) every time. Which prompted the question – is there a better way?
(as a recap, the canvas version:
http://prospero.talkingcode.co.uk/snow/snow.html?renderer=canvas)
Two approaches spring to mind that provide ‘sprite‘-like functionality – SVG and CSS.
The SVG implementation (courtesy my brother) creates a separately addressable circle object for each snowflake, and an updatable polygon for the ground:
http://prospero.talkingcode.co.uk/snow/snow.html?renderer=svg
The CSS implementation uses a <div> with rounded corners for each of the flakes, and a number of straight-line single-pixel <div>s to draw the ground.
http://prospero.talkingcode.co.uk/snow/snow.html?renderer=css
… and it turns out (in my unscientific testing) that Canvas wins out. You can test for yourself with the lovely JSPerf:
Any enhancement suggestions welcome