Jump to content

Dom vs Canvas


Mat Groves
 Share

Recommended Posts

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...