Is there a benefit of running multiple canvas

[MrPancakes]

Hello everyone,

I have a question related to performance and multiple canvas when writing a JS game, would there be a point to split up graphics on difference canvases, also what are people experiences moving some graphics that is not game related like background images to a element like a div in the background and just update it through a gamestate.

Also if anyone have articles or resources concerning good practice for "Game performance in JS" please share those.

Also anyone made tests what is more computer heavy 50 of 20*20px small canvases or 1 bigger let's say 800*600px

 

Maybe a stupid question I do not know ?

[b10b]

Hi, my advice would be to run some benchmark tests.  Such results will likely vary significantly based on different devices or different browsers, or even different versions.  An alternative approach is to design towards the "normal" - i.e. consider what is typical browser requirement for typical websites including typical adverts.  Things that are "normal" are more likely to be optimized by browser and device vendors - and it is such optimizations that will often yield the biggest performance boosts.

[Langerz82]

Yes there are especially if your background is scrollable and you have a limited amount of sprites and you box delete them rather than clearing the whole canvas. Checkout the source of http://www.retrorpgonline.com/ you will see I have about 6 used canvases. (the atmosphere ones are not used).

edit:

Also exclude the unscaled canvases they were an over-optimization gone wrong.