Page 1 of 1

Multiple Canvas elements on same page or not?

Posted: Tue May 31, 2016 12:18 pm
by 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?

Re: Multiple Canvas elements on same page or not?

Posted: Tue May 31, 2016 1:07 pm
by 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.

Re: Multiple Canvas elements on same page or not?

Posted: Wed Jun 01, 2016 12:33 am
by 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?

Re: Multiple Canvas elements on same page or not?

Posted: Wed Jun 01, 2016 3:12 am
by 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.

Re: Multiple Canvas elements on same page or not?

Posted: Wed Jun 01, 2016 8:19 am
by 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.

Re: Multiple Canvas elements on same page or not?

Posted: Wed Jun 01, 2016 2:21 pm
by 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

Re: Multiple Canvas elements on same page or not?

Posted: Thu Jun 02, 2016 12:02 am
by Verahta
Sounds like it is definitely a legitimate option.

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