Efficiency of
s

Question

I want to ask if someone can give me some hints with a design decision I want to make.

My project will feature some sprites (expecting 10 to 30 on the screen at once), and there are several ways to implement them. One way would be CSS-Sprites, another is drawing them on a canvas. Both are not difficult. The background will be a tile-map drawn by another <canvas>, in the background.

I've seen that Crafty attaches Sprites as <div> that is in the HTML within the <canvas>, as a CSS-Sprite. I am not sure if there's a speed difference if the <div> is in the canvas or not. Is there a difference?

I expect the user to interact with the sprites, by mouse clicks, left, right, etc. And the sprites are of course standing or walking on elements of the tile map. So is it more efficient to write a handler for the <canvas> and find the sprite, or rather using the <div> and let the browser handle the finding?

I hope I could communicate my problem.

What platforms are you targeting? For instance iOS has very different performance characteristics to desktop browsers, and also there are large differences depending on whether you trigger hardware acceleration or not. — robertc, Nov 04 '11 at 13:25
My main targets are desktops with any browser (except IE, I don't want to waste time trying to support IE), but I wouldn't mind if it runs smoothly on mobile devices as well. — Lanbo, Nov 04 '11 at 13:37

score 12 · Accepted Answer · edited May 23 '17 at 12:32

12

My tests show that pure HTML + CSS is generally faster for sprites than Canvas:
Performance of moving image on web page via CSS vs HTML5 Canvas

See the tests and results (from browsers 10 months ago) here:
http://phrogz.net/tmp/image_move_speed.html

Specifically, I have two tests almost exactly the same as your question:

Summarized FPS:

                  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

More recent browsers are generally much faster (Chrome almost always hits a 250fps internal cap on the same machine) and close the gap more, but using Canvas is still slower and far more work.

edited May 23 '17 at 12:32

Community

1
1

answered Nov 04 '11 at 16:03

Phrogz

296,393
112
651
745

Time has moved on, browsers got better and it appears to me that the canvas version is equal or faster with current browsers. Could you please test if my results are correct? – ASA Dec 01 '13 at 17:35
This answer isn't true anymore. I just got ~90 FPS on a CSS example and over 200 FPS on the canvas (Chrome 34). – Konrad Dzwinel Apr 22 '14 at 20:13
Browsers may have moved on, but this answer helpfully provides two tests so we can see for ourselves, so this is still a very useful answer. – Michael Jan 16 '15 at 15:27
I'm not sure if this is relevant, but does the canvas need to be forced into hardware accelerated mode? My android phone gets terrible performance on the 20 sprite canvas versus the CSS. – Nathan Goings Apr 07 '17 at 01:31

score 0 · Answer 2 · answered Nov 04 '11 at 13:20

0

Canvas has better performance.

Its optimized to do this kind of behavior.

answered Nov 04 '11 at 13:20

Ricardo Bin

887
6
12

2

Downvoted without citation or benchmarks. My own tests show the opposite to be true. – Phrogz Nov 04 '11 at 16:04
Try put more than 20 animated sprites in your test... Try 2000. Your tests can show other results... ;) – Ricardo Bin Nov 04 '11 at 19:01
2

Yes, but the original question says explicitly: _"expecting 10 to 30 on the screen at once"_. – Phrogz Nov 04 '11 at 19:03
1

Agree. But u are right, i should put some references in my answer. In time: http://blog.frontendforce.com/2010/03/games-development-in-javascript-canvas-vs-dom-benchmark/ – Ricardo Bin Nov 04 '11 at 19:19

score 0 · Answer 3 · edited May 23 '17 at 11:45

Canvas would be faster, though at such a low object count it won't matter too much. You should go with Canvas regardless because if you ever plan on extending it to be more intricate, more polished, or you want special effects (like particles), or have more objects, canvas will become a necessity.

If this is gonna be run like a game, use Canvas. But if its going to be run like a mapping application, SVG isn't a bad alternative since some of the event work is done for you already. I'm guessing this project is closer to a game.

I've given much longer replies to questions like this one, for instance here: HTML5 Canvas vs. SVG vs. div

The background will be a tile-map drawn by another , in the background

For performance sake, just set the canvas' css background-image to be this tile-map! (assuming it doesn't change)

Efficiency of and s

3 Answers3

Efficiency of
s