Multiplatform HTML5 games DOM+CSS vs CANVAS vs both

Question

I've built a few HTML5 games within the past few months and have been using the createJS suite and rendering everything to canvas.

The reasons behind my choice of canvas is that it seemed easier to get it working cross platform as I could just scale the canvas to fit the screen and everything was perfect. well, on most devices! Performance is an issue on older android and ios devices, but not horrendous.

My next HTML5 is a biggie, previous games were only simple point and click, quiz styled game with little animation and very few menus. This one is a bigger dinner with a lot more menus, interactive objects, but again only simple animations. But it involves a pan-able (is that a word) environment.

I've been more inclined to use the DOM and CSS for HUD items and menus for this, which would be overlaid on top of a canvas, running the main pan-able environment.

I understand this may take more time to get working on multiple screen resolutions using multiple CSS media queries, and even different layouts for smaller resolutions, (like hiding certain labels from the HUD or whatever)

I'm looking for a comparison of the technologies for mainly performance but also to find out which methods are 'best practice'.

---

It would also be nice to see some examples of multi-platform games using these different methods (or even others that I am not aware of) to see how they go about it and to test performance. :)

Answer 1

It definitely depends from the complexity of the game. I tried to develope a full DOM game with a pan-able map, last year. But encountered so many performance issues and device inconsistencies that I had to gave up. Now I don't remember the exact values, but the number of DOM elements that makes a browser unstable is pretty low for a game everywhere after "very simple".

I'd definitely try as you mentioned, a DOM interface over a canvas environment. And anyway, keep it simple!

Answer 2

You should definitely choose for a simple solution. If I were you, I'll keep on using the createJS suite because it contains everything you'll need. It's really good and does not give you performance issues if you ask me. Never had problems with it.