Performance of moving image on web page via CSS vs HTML5 Canvas

Question

I have an image and move it around my web page (JavaScript) like this:

satelliteImage.style.top = coordinates.top + \"px\";
satelliteImage.style.left = coord         


        

Answer 1

Further to MyNameIsKo findings on iPad 3 performance. I was wondering if it was to do with the fact that the CSS DOM method had to worry about drawing on the retina screen of iPad 3 whereas the canvas would be drawn to at lower resolution and then blt'd to screen. An iPad 1 is significantly faster for CSS updates than the iPad3!

I also made some changes to the canvas javascript to be able to draw to a retina resolution canvas. I added the following code after canv.height = h; in the bg.onload function:

if (window.devicePixelRatio) {
    ctx.canvas.style.width = w + "px";
    ctx.canvas.style.height = h + "px";
    ctx.canvas.height = h * window.devicePixelRatio;
    ctx.canvas.width = w * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

which made a huge reduction in performance...

iPad 1 (iOS 5.5.1)

iPad 3 (iOS 6.1.3)

                      CSS Sprite        Canvas Sprites
-----------------------------------------------------
iPad 1                   90                  100
iPad 3                   55                  120
iPad 1(canvas changes)   n/a                 100
iPad 3(canvas changes)   n/a                 35