Should I use multiple canvases (HTML 5) or use divs to display HUD data?

Question

I am in process of making a game where the health bar (animated) and some other info represented visually like some icons showing the number of bombs the player has etc. Now, this can be done both in canvas (by making another canvas for info that sits over the main canvas, or it can be done using many divs and spans with absolute positioning. This is my first time in making a browser based game so if any experienced people view this, tell me what you recommend. I would like to know that which method would be faster.

The game will also be running on mobile devices. Thanks!

Answer 1

There is no straighforward answer and I suggest you do FPS testing with different browser how it plays out for your use case. If you do not wish to go such in-depth I suggest you simply draw the elements inside canvas and if you need to hide them then leave out drawHUD() call from your rendering loop.

For HTML HUD overlay on <canvas> the following factors should be considered

• Can the web browser compositor do hardware accelerated <canvas> properly if there are DOM elements upon the canvas

• HTML / DOM manipulation will be always slower than <canvas> operations due to inherited complexity dealing with DOM elements

• <canvas> pixel space stays inside <canvas> and it might be difficult to have pixel-perfect aligment if you try to draw elements on <canvas> outside the canvas itself

• HTML offers much more formatting options for text than canvas drawString() - is HTML formatting necessary