Multiple Canvas elements on same page or not?

[Verahta]

Context: a browser game written in HTML5/JS/Node, with multiple 'windows' or view-ports doing different things (say map, radar, vitals, etc).

Would you just make the entire game inside one canvas, or break up each "content area" into it's own canvas and structure the rest of the game UI like a web app/site?

[hallsofvallhalla]

hmm good question. Cant say i have a good answer for it. The one thing I would do is do a test on both. Check speed and data size to see if there is any difference. I would personally want to break them up but I would have concerns on if it adds to overhead.

[Verahta]

Yeah, I'm not very experienced so I am struggling to grasp how to best structure everything together.

What about cross-platform availability? Would multiple canvases not work for a tablet app version of the game?

[a_bertrand]

Using only one canvas should give you better performances, but forces you to refresh every single piece every time one of the piece want to redraw. Yes you could also have partial redraws but usually this is even more complex. So it pretty much depends on your own game and how it works, even if personally I would tend to try to make only one canvas if possible.

[Verahta]

GX-mockup-1.jpg

I threw together this quick and dirty mock-up to try and better explain what I mean. Obviously it's dumb and makes no sense, but it does illustrate basically the general idea of what I meant. A PBBG that can be played in the browser but also as an app on tablets.

[hallsofvallhalla]

I did some reading on this and agree with a_betrand. I however do not think having multiple will affect your performance enough to outweigh being able to draw each one differently.
I personally would recommend multiple canvas's.

good article
http://www.html5rocks.com/en/tutorials/ ... mul-canvas

[Verahta]

Sounds like it is definitely a legitimate option.

http://www.ibm.com/developerworks/libra ... index.html