I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them has different size and moves to different direction I would be using many canvas objects. I wonder if it's OK to put so many canvas objects on the browser screen. Will this make the game very slow?

  • \$\begingroup\$ So, you're using the canvas elements as html objects and you move them around with CSS? Why not just draw them on a canvas \$\endgroup\$ – Bálint Jan 5 '17 at 6:53
  • \$\begingroup\$ @Bálint I am not moving them around with CSS. I use pure javascript. Every one of them is different and can be destroyed so I think it is best to have different canvas objects. \$\endgroup\$ – newguy Jan 5 '17 at 8:03
  • \$\begingroup\$ Oh, you use pixi. Then I assume they aren't actually visible \$\endgroup\$ – Bálint Jan 5 '17 at 8:48
  • \$\begingroup\$ @Bálint They will be visible once I put them onto a Texture. But technically speaking yes only the Textures are visible. \$\endgroup\$ – newguy Jan 5 '17 at 9:51
  • \$\begingroup\$ could you mark one of the answers as correct? \$\endgroup\$ – Bálint Jan 7 '17 at 11:20

Elements not in tbe DOM don't affect the rendering performance because they aren't used by the DOM renderer. They only take up a bit of memory but until you have couple thousand of them or they each have insane resolutions, then you won't have a problem with this.

  • 1
    \$\begingroup\$ You mean even if I use document.createElement('canvas') but without using document.body.appendChild(canvas) the element will not be in the DOM? That's awesome. \$\endgroup\$ – newguy Jan 5 '17 at 11:00
  • \$\begingroup\$ @newguy Yeah, it's just memory. \$\endgroup\$ – Bálint Jan 5 '17 at 11:53
  • \$\begingroup\$ @newguy Yes, document.createElement('canvas') is the JavaScript way to create a render target texture. \$\endgroup\$ – Philipp Jan 5 '17 at 13:13

Whileit is possible to have hundreds of canvas elements being dynamically resided using CSS, it is not recommended because your code can get very ugly very fast. it is far easier to render sprites on the same canvas if you are building a serious game. If this is just a theoretical question, then yes, expect a severe increase in load time simply because CSS, being a style sheet language, was not built to handle advanced keyframing and animation. Just use one canvas.

  • \$\begingroup\$ No I am not building them using CSS. I use 2d context to build the canvas object. Then I put it into a sprite using PIXI.js 's sprite create method. \$\endgroup\$ – newguy Jan 5 '17 at 8:05
  • \$\begingroup\$ I see. My comment about code ugliness as well as load speed still applies. Using canvas also restricts you in that background art as well as custom hotboxes are a pain in the neck to code \$\endgroup\$ – Vinayak G. Jan 5 '17 at 8:16

Having more than one canvas is a good way of improving performance actually.

And from my tile-world example I had two canvases with one of them being 3840px wide and high. But performance was still good. You can try it out here and/or look at the code on github if you are into that stuff.

If I didn't use two canvases I'd have to redraw a whole 3840px world or you'd have to come up with a method of knowing who's within the player's sight range and only draw them. Doing that again a single canvas is a bad idea, a better idea would be to draw the background/world on one canvas and never touch it again. Then add enemies and the player on their own respective canvases. You can read the full explanation here: Camera movement, Draw grid


You can check out this jsperf, this tutorial on making your own html5 game engine, and this section on canvas performance on html5rocks for more info and proof.

Hope this was helpful! Have a good day :D


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.