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.