1

I'm wondering what would be the most efficient solution to animate sprites(images) moving on a fixed background : use DOM elements with absolute positioning or animate them on a canvas (with drawImage and clearRect) ?

The advantage I see in the first option is I don't have to worry about erasing old position before drawing the new one. Does it make sense ?

Do you see any other good alternative ?

Thanks

Edit: I want to focus on mobile devices. Does it make a big difference in terms of HTML5 support?

Stephan
  • 4,187
  • 1
  • 21
  • 33
sdabet
  • 18,360
  • 11
  • 89
  • 158
  • 1
    Have a look here: http://stackoverflow.com/questions/2266416/what-are-the-advantages-disadvantages-of-canvas-vs-dom-in-javascript-game-devel – scravy Dec 09 '11 at 09:43
  • Also depends on which browsers you have to support. – kapa Dec 09 '11 at 09:46
  • I want to focus on mobile devices. Does it make a big difference in terms of HTML5 support ? – sdabet Dec 09 '11 at 10:33

3 Answers3

2

HTML5 Canvas is relativelly new, if there are only few sprites, you should use DOM elements, it will work on most browsers. Don't forget, some older MSIEs can't display transparent PNGs, only GIFs (I don't remember the version), there are lot of folks with outdated browsers.

Also a good alternative is not to do, and also don't use animgifs on your website; be careful with flying-around things, less is more.

ern0
  • 3,074
  • 25
  • 40
1

If your requirements don't require you to use Canvas, use DOM elements and absolute positioning as it will work on older browsers.

wosis
  • 1,209
  • 10
  • 14
1

Here are some "pro" canvas arguments:

  • The nice fact about canvas is that can be 2D accelerated and you can obtain high fps.
  • Also the problem with DOM is that you are limited to rectangle shape only.
  • All modern browsers have nice canvas support so if you are not limited by legacy system it makes more sense to use canvas
Alex
  • 5,510
  • 8
  • 35
  • 54
  • 1
    in the DOM .. you are not just limited to rectange shapes. With CSS shapes you can make Circles and other types of shapes.. http://css-tricks.com/examples/ShapesOfCSS/ .. http://www.html5rocks.com/en/tutorials/shapes/getting-started/ .. and you can also use images too. – Jonathan Marzullo Oct 20 '14 at 16:09