HTML5: Canvas and SVG
© 6 June 2011 Luther Tychonievich
Licensed under Creative Commons: CC BY-NC-ND 3.0
other posts

A couple of random demos to test ECMAScript-enabled SVG and Canvas elements.


Note that the two are not even close to trying to be a comparison. The Canvas element is doing only very simple computation, while the SVG element is performing extensive 3D arithmetic and rebuilds the entire DOM every single frame.

Repeatedly clicking on an element speed up its motion.

Canvas Element

400,300, Please wait for canvas to load.

Bézier curves implemented from scratch.

SVG Element

100%,20em, Please wait for SVG to load.

Suzanne model is available as partSuzanne might be Blender’s logo? I’m not clear on that… of Blender, an open-source 3D modeling application.

Looking for comments…

Loading user comment form…