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||-|