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