CODEWITHSUNDEEP
performancehtmlcanvascss-sprites
Lanbo
Lanbo

Reputation: 15712

Efficiency of <canvas> and <div>s

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.

Upvotes: 11

Views: 7436

Answers (3)

Phrogz
Phrogz

Reputation: 303549

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.

Upvotes: 12

Simon Sarris
Simon Sarris

Reputation: 63892

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)

Upvotes: 0

Ricardo Bin
Ricardo Bin

Reputation: 887

Canvas has better performance.

Its optimized to do this kind of behavior.

Upvotes: 0

Related Questions