Quantcast
Channel: talkingCode » javascript
Viewing all articles
Browse latest Browse all 5

Javascript Snow performance

$
0
0

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:

http://jsperf.com/js-snow/2

Any enhancement suggestions welcome :)


Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images