0

I want to do something like really small game. It is here.

User: honza Password: honza

I don´t know if I should use canvas or HTML DOM. I only want to redraw about 20 pictures (10 in the blue blocks and 10 in the gray blocks) when I change a section, zoom it and move. Probably there will be a moving person. What is you opinion? Should I use canvas or HTML DOM?

Sergey Telshevsky
  • 12,077
  • 6
  • 55
  • 78
Jan Kožušník
  • 683
  • 3
  • 16
  • 30
  • I have found this link. I think it is what you need. [Read this](http://stackoverflow.com/a/13628035/2187426) – Lorin Mar 19 '13 at 16:56

2 Answers2

2

Manipulations (moving stuff, animating, changing colors, etc) in the DOM will cause the browser to repaint and reflow the elements, this is a resource-consuming process. Especially for cases where you have lots of constant visual updates that will constantly trigger the browser to process, resulting in a slow, laggy experience for those on lower-end systems.

Canvas, on the other hand will not be as much because the <canvas> element would be the same size, so no reflow and any animations, etc will only cause repaint within the <canvas>.

See this for more thorough explanation: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Amy
  • 7,388
  • 2
  • 20
  • 31
  • there won´t be lots of constant visual updates - I will only update 20 images when I change section, move the person when user press the arrow keyes and I will do zoom of content... I´m still hesitating... – Jan Kožušník Mar 19 '13 at 18:23
0

If you can do all necessary animations for the game using plain old DOM elements then i supose that is enough, however for any kind of complex animations i would suggest using canvas.

What you described seems to be perfectly doable with DOM, assuming your person moving will not include non continuous animations. You can create relatively complex animations without canvas, its just a lot more work than doing the same with canvas.

If you are doing this to learn new things then pick canvas, as it will serve you better in the future.

cernunnos
  • 2,766
  • 1
  • 18
  • 18
  • there won´t be any complex animations... thank you for your answer – Jan Kožušník Mar 19 '13 at 17:22
  • I believe sweetamylase is a better answer, as it contains additional information on performance trade-offs. The link he posted is useful even if you chose to do your game with the DOM approach. – cernunnos Mar 19 '13 at 17:25