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

Figured I'd update this old question with my findings on a 3rd generation iPad:

Canvas wins 2:1 with the sprite animations an average of about 120 fps with background clearing toggled both ways. CSS could barely meet 60 fps.

As for the single image, CSS was definitely quicker.

Answer 2

I have created equivalent tests to compare frame rates for moving an image via CSS versus drawing it on an HTML canvas. Here are the tests:

• Moving an Image via Canvas
• Moving an Image via CSS
• Moving 20 Sprites via Canvas over a 1024x768 background
• Moving 20 Sprites via CSS over a 1024x768 background

And here are the FPS results (see URL for test details):

                  Image  Image  Sprite  Sprite
        Browser  Canvas    CSS  Canvas     CSS
----------------------------------------------
  Safari v5.0.3      59     95      59      89
Firefox v3.6.13      59     95      60      90
 Firefox v4.0b8      75     89      78      82
    Chrome v8.0     108    230     120     204
    iPad, Horiz      17     44       2      14
     iPad, Vert       4     75       2      15

As you can see:

1. You're always going to get better results moving an image as an HTML element than redrawing a portion of the canvas, and
2. You're likely possibly doing something wrong if you're only getting 5fps.

Edit: Added tests for moving 20 small animated sprites over a background. The conclusions remain the same.

Answer 3

In my experience with Canvas you should be able to get a good 50 fps on Firefox and even a good 15 fps on iOS. IE9 will probably be the fastest browser, other versions don't really implement Canvas.

Answer 4

It's now been over 2 years and I decided to run these tests to see if this still holds true. It does...and it doesn't.

1. Firefox Desktop and mobile both run CSS animations significantly faster than canvas.

2. Chrome desktop runs canvas and CSS animations about the same

3. Chrome Mobile (on Nexus 7) does the exact opposite: canvas runs significantly faster than CSS!

(Using Firefox Android with Nexus 7 and desktop browsers on Linux with 1920x1080 resolution)

Browser/OS          Canvas Image   CSS IMage   Canvas Sprites   CSS Sprites    
-----------         ------------   ----------  --------------   -----------
Firefox 16          56.7fps        215.6 fps   59.2fps          203.6fps
Firefox 16 Android  17.1 fps       179.6fps    11.5fps          35.7
Chrome 22           192.3fps       223.5fps    170.1fps         164.3fps
Chrome Android      48.3fps        39.9fps     92.8fps          13.1fps

What does everyone else get? Can anyone test IE9, 10 for this?

Answer 5

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