Dom vs Canvas

[Mat Groves]

Hey everyone!

 

Been doing some testing over in the goodboy laboratory to find out which is faster for games, DOM or Canvas?

Looks like Canvas wins hands down on all my devices but keen to know if this holds true for the wider world!

 

***caution*** post contains lots of pirates and bunnies

 

http://goodboydigital.com/to-dom-or-not-to-dom/

[Ezelia]

I think Dom can performs better on old browsers that don't support hardware accelerated canvas. I read an article about that but don't remember where...
in all modern browsers, I don't think it worth using a dom renderer

[rich]

On desktop I agree that it's pointless using DOM - unless of course you need to target a browser earlier than IE9 - which is no insignificant requirement actually. We've a game in build for the BBC that has to support back to IE7 and a game we released a few months ago for a massive on-pack promotion (that I sadly can't name) which had to do the same. You just can't assume IE9 adoption yet, not unless you're targeting geeks or gamers.

 

It also depends on the platform/device a lot. For example just having a 100% blank canvas, rendering absolutely nothing and just doing a clearRect every loop but at full 1024x672 resolution on an iPad 1 will eat up a huge chunk of your CPU time. Make it actually start drawing pixels and it doesn't take long before it runs out of CPU to respond to touch events for example. Play a bit of audio with that and it becomes even worse. Earlier Android devices are very similar.

 

There are just some kinds of games that simply don't work without canvas though - and if possible I will always always use it first. But right now the client work dictates the tech, and for lots of them IE9+ is still a major issue. Perhaps in a year or two it won't be, but until then if your renderer limits to canvas/webgl only, it limits practical real-world use as well imho.

[Mat Groves]

Good point, I guess thats where a flash fallback would come in quite handy!

[rich]

Yes, but the scale of the game we're building is massive and the thought of re-coding it in Flash just seems like a waste of resource, given that it has all been coded once already.

 

For smaller games we've done Flash fallbacks in the past though, so I'm not against the idea at all. But I don't expect us to ever do another one now.

[Ezelia]

Good point, I guess thats where a flash fallback would come in quite handy!

 

the most gain you have from dom renderer is noticed on old mobile devices ... witch don't support flash, so flash isn't the good choice IMO.

[Mat Groves]

Interesting, how much faster is DOM than canvas on old these devices?

[rich]

Get hold of an iPad 1 and see for yourself You can achieve 60fps with DOM, definitely not with canvas. But the limit on the number of objects is tiny. Push dom too far and it falls over.

 

Personally I think it depends a lot on the type of game you're making. If it's a shooter with lots of particle effects, bullets, etc then your only choice is really to use canvas and be done with it (although I know quite a few devs who like to use say a dom scrolling background with canvas overlay). But if it was say a match-3 game or a card game then dom response is fluid and smooth because object count is so low, so may as well adopt that for the benefit of older devices.

 

Honestly don't believe there is a "one size fits all" answer. Every game is different, and bunnies and pirates are not a real world test case

[Mat Groves]

100% agree! different tech different uses

 

I guess I prefer to make the slightly more hectic games if I can, which by there very nature cant run so well on old mobile devices / DOM.  

[rich]

Absolutely. If I could get away with it I'd build for iOS6 generation devices/uber desktop browsers only, and to hell with the rest!

 

Back in the real world however we've yet to have a single client project that allows this

[Mat Groves]

Totally know what ya mean. Those clients do exist though

[rich]

Outside of concept work for Google / Mozilla?

[benny!]

Same here. Some years ago I was kind of disappointed about the poor canvas performances on some older devices. That's why I tested DOM performance with my game Unitem. Was pretty ok. But when I run the game on newer devices I tend to think that it would perform better using canvas.

[P.Uri.Tanner]

DOM (CSS3 Transformations via optimized transformation matrices) is not dead yet: http://famo.us (or join the beta group here: http://famo.us/r/Cvcf )

 

This runs very well on my Galaxy S2 - while most of the Canvas stuff doesn't.

[Ezelia]

DOM (CSS3 Transformations via optimized transformation matrices) is not dead yet: http://famo.us (or join the beta group here: http://famo.us/r/Cvcf )

 

This runs very well on my Galaxy S2 - while most of the Canvas stuff doesn't.

 

not working on Firefox and IE ... the animations are impressive on chrome.