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 = coordinates.left + "px"; 

Unfortunately, the performance is quite bad in all browsers except Chrome. The bottleneck is rendering speed. I have no hope for IE, but I want to improve Firefox at least. Does anyone have experience with performance of HTML5 Canvas while moving an image, compared to Style change?

Answer 1

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 2

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?