Floorplanner Tech Blog

Last week I created two simple tests to get some insights on the performance of Canvas and SVG on iDevices. The test is a blue square bouncing from left to right and back again, it’s repositioned every frame. The faster a browser can render a frame, the better the performance is on the device. Well.. at least in this particular case. In the Canvas test, the scene is cleared (by using clearRect) and the square is drawn (using fillRect) at the new position. The SVG test draws the square once and only updates its x-coordinate.  Thanks to Tim Knip I found another way to move the square in Canvas using CSS3 3D Transforms. Since these transforms are hardware accelerated on iDevices, it’s interesting to see how Canvas using 3D transforms performs.

Device	OS	Browser	Canvas (redraw)	Canvas (3D transforms)	SVG
iPhone 3Gs	iOS 4.2	Safari	45	90	90
iPhone 4	iOS 4.2	Safari	30	92	80
iPad 1	iOS 4.2	Safari	90	90	95
Nexus 1	Android 2.2	V8	75	99	-

On the phones it seems that Canvas using 3D transforms is 2x faster than redrawing the Canvas. That’s a huge performance difference! On the iPad there is little to no difference.