44

What are advantages and disadvantages of creating games in 'pure' DOM as compared to using canvas?

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
budzor
  • 613
  • 1
  • 6
  • 11
  • 1
    Don't use either. Use flash or go native. The browser is not a game engine and never will be. – Andy Ray Nov 25 '12 at 04:02
  • 1
    Also, there is no good way to do sound effects. Unity has a web player which in my experience works nicely. – Deestan Nov 29 '12 at 14:44

4 Answers4

19

canvas pros :

  1. could manipulate pixel and apply filter effect, so easy for image processing;
  2. very efficient for small size but hundreds of elements in the game
  3. many libraries for game could be found using canvas, such as box2dweb, and could make awesome games such as angry bird

cons:

  1. it's stateless, so you have to record the states of the elements in the canvas, and handle the hit test by yourself.
  2. low efficient for very large size but with one a few elements in the game
  3. great ability, great responsibility. the freedom to draw, brings in you have to charge of all the drawing staff. Fortunately, there are many libraries there, such as cocos2d-html5, IvanK.

DOM pros:

  1. rendering by the browser, so less error-prone;

cons:

  1. could do simple animation with CSS only, that makes the game not fluent;
  2. no good for manipulating hundreds of DOM elements;  
clickbait
  • 2,818
  • 1
  • 25
  • 61
tristan
  • 399
  • 2
  • 7
  • 2
    times have changed, Browser Layout Engines have become faster and JS can do complex animations that CSS can't. plus, with proper programming, DOM can handle games. You can also script up a DOM renderer for Physics engines if you're into that kind of thing – Technohacker Oct 31 '16 at 11:37
  • @K3v1n, The real question is Why not canvas? – Pacerier Apr 11 '17 at 20:07
  • @Pacerier canvas is meant to be low level, therefore using the API natively is complex for beginners (including me). Granted, there are libraries to manage the rendering part. – Technohacker Apr 12 '17 at 09:31
1

When you develop with Canvas you will have to use the GameLoop technique which is very painful because you will have to redraw all elements all the time.

When you develop with DOM you will be able to redraw only the objects that have been modified and will leave the hard work for the browser implementation.

If your game has a few modifications per frame then you can use the DOM, otherwise use the Canvas, please! It is so much faster!

Adriano
  • 3,788
  • 5
  • 32
  • 53
melanke
  • 804
  • 1
  • 9
  • 25
  • 4
    Not true- if your game scene has no changes and you have coded it correctly - you should not redraw the scene again. In this regard Canvas requires more knowledge of game development techniques – cloakedninjas May 21 '12 at 10:27
  • Yes, you are right! But I think it is not a good choise using canvas for that case – melanke May 22 '12 at 21:29
0

With canvas you can perform operations such as rotation that you can't do with pure dome without use some "heavy" tricks. Anyway the dom is faster and you can use it in every browser without problems. You must think about what are you going to use in the game, if you will use only basic operations use the dom otherwise choose the canvas.

mck89
  • 18,918
  • 16
  • 89
  • 106
  • 3
    DOM is really faster? You're sure? I made simple pre-game engine with 2-3 moving elements in DOM and it was terrible. Ive never tried canvas, but examples i saw in internet was pretty much fast (faster then other DOM games i saw). Where i can read about that? – budzor Feb 15 '10 at 14:29
  • I'm absolutely sure. Think about the fact that canvas must manipulate a large amount of data. – mck89 Feb 15 '10 at 14:36
  • 7
    Um, no, the common reason to use canvas is that it's faster than creating and modifying 1000s of DOM elements. – Nickolay Feb 15 '10 at 16:06
  • Yeah if you have 1000s dom elements, but i was talking about a simple interface. As i said in the answer if you want to use simple things (graphic included) choose the dom otherwise choose the canvas. – mck89 Feb 16 '10 at 09:55
  • Anyway think about that the event management is very easy with dom elements while with canvas is more complicated. – mck89 Feb 16 '10 at 09:57
  • 1
    With Canvas, you can draw lines, shapes, text and the like using the trivial x,y coordinate system. You can always repaint or erase part of Canvas in response to the mouse clicks or other user input events. Same as any cheap graphic card of 85'ies, nothing sophisticated. Could anybody provide a link to tutorial how to draw arbitrary line with DOM and without some layer of the third party library? We could compare the code then. – Audrius Meškauskas Nov 28 '12 at 15:32
  • @mck89, DOM was never fast. Links here: http://gamedev.stackexchange.com/questions/23023/to-canvas-or-not-to-canvas-when-building-browser-based-games#comment247285_23026 – Pacerier Apr 11 '17 at 20:09
0

Look here: Why Canvas is not an obvious choice for web games.

franzlorenzon
  • 5,845
  • 6
  • 36
  • 58
qqryq
  • 1,814
  • 3
  • 18
  • 20