What are the advantages/disadvantages of Canvas vs. DOM in JavaScript game development? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

开发者_JAVA百科

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 6 years ago.

Improve this question

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

---

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;  

---

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!

---

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.

---

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