6

I am planning on creating a real-time multiplayer platformer game in HTML5 using javascript. After searching about 4 hours on the webs, i couldn't find an up-to-date answer on the eternal question: rendering my game with DOM will be faster than rendering it inside a canvas? The game will be the whole document. 2/4 players will be jumping on the map and will shoot at each other, bombs will explode. So? What will it be. I remember I made 2 years ago a draw application with DOM and it worked kinda smoothly, but i guess canvas speed is better nowadays? Thank you guys.

P.S. I think of using Dart too.

Improve this question
3
  • 2
    Most modern Javascript (or Dart) games are rendered in a canvas. Dart has some libraries (I'm almost sure) for advanced canvas programs, too. Take a look at some Dart sample projects or the Dart package manager Pub and you should quickly find some stuff to get you started. Commented Jun 12, 2013 at 18:29
  • Most of newest browsers have hardware accelerated canvas. The actual performance still depends of the browser. You could also mesh the solutions, using both canvas and DOM rendering. But canvas will show its beauty as more complex are the game in terms of rendering (like particles, shadows, transformations...etc). Commented Jun 12, 2013 at 20:03
  • If you choose to use Dart, check out dartgamedevs.org for lots of info and code. Commented Jun 13, 2013 at 11:41

2 Answers 2

Reset to default
7

I use canvas, and would say to do the same since it's a direct drawing mode. However, you should absolutely make sure it is forced into hardware acceleration wherever possible. You do this by setting the style of the <canvas> element into transform:translateZ(0); (or different browser interpretations of that, e.g. -webkit-transform:translateZ(0);). Manipulating the DOM can be slow now that canvas is closer and closer to native code, especially with simple methods to get the most performance out of it.

My games seem to do pretty well on different platforms with this - not universally well on every single platform (older Android OSes lag, but their JS & browser rendering engines weren't that fast to begin with), but quite well on many platforms.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

How does transform:translateZ(0) affect GPU acceleration? Can you provide some info?
3

Canvas is the best choice for the type of game you are describing, but some DOM elements are still very useful even using canvas, for example, asking the player's name, or creating a menú or profile section inside the game. You can render a div with absolute position on top of your canvas when you need to display DOM elements, and do all the "game stuff" like drawing and animate sprites in the canvas element.

The reason why Canvas is the best choice is simple. I'm pretty sure that you can't or it would be really hard to do things like this without the canvas element:

http://galloman.github.io/ss2d/samples/skeletons2.html

More at: http://ss2d.wordpress.com/support/

Improve this answer

1 Comment

Welcome to SO! Try to avoid subjective statements of opinion (i.e. "I'm pretty sure") and instead provide factual information with references as much as possible. Cheers!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.