All examples By author By category About

yonester

Canvas vs. SVG Test

A comparison between rendering circles in SVG and canvas. The functions are purposely written separately but similarly to show some key differences. Notably, SVG's structure allows us to take advantage of D3's wonderful data binding capabilities, which makes diffing new data against present data expressive and easy. Canvas will perform better when animating many nodes (not shown here) and makes styling more succinct, but try zooming in a couple of steps (Cmd-plus in OSX, Ctrl-plus in Windows) to see the difference between rendering pixels and vectors.