Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

My simple canvas game seems to work fine on Chrome and FF on Mac/Linux. I haven't had chance to test it on smart phones or Windows environments yet. It doesn't use double buffering but I have seen some JS Canvas examples using it.

When is the use of the double buffering recommended? Does it make difference only for specific browsers? Is there a significant performance hit?

Thanks!

share|improve this question
2  
OT: this game rules, it's very promising, good work (ofc you have to work much more on the interface, some things aren't clear, etc.) –  Lohoris Nov 30 '10 at 19:03
    
It is indeed pretty sweet. Recommendation though: map level switch to something other than space. Kind of annoying having my browser window scroll each time. –  michael.bartnett Dec 3 '10 at 6:44
    
also don't use arrow keys for steering.. i'm currently in safe mode and on a small screen it keeps scrolling all over the place... fyi :p –  Tor Valamo Dec 3 '10 at 11:49
    
I think it is possible to capture keys so the browser windows doesn't act on them. –  AttackingHobo Dec 3 '10 at 18:17
    
Thanks! A,W,D and return work as well now. Send tweet to momentumracer or email petteri@momentumracer.com for further comments or ideas so this wont become a chat board :-). –  Petteri Hietavirta Dec 3 '10 at 18:47

3 Answers 3

up vote 15 down vote accepted

Double buffering a canvas based game will certainly be a performance hit. You'd be drawing an extra amount of pixels equal to your canvas size every frame. In canvas based games drawing to a canvas is the biggest bottleneck in most cases and you want to limit that as much as possible, especially on mobile devices.

Chrome has GPU acceleration (as of the latest versions) as well as a wicked fast JavaScript engine (V8) that you won't see matched in a mobile environment. Even in Chrome you'll see a slowdown by implementing double buffering.

Long story short, the benefit of double buffering (dealing with "tearing") isn't worth the performance hit you'll take most likely.

share|improve this answer
1  
However when you notice flickering or something alike a double buffer will most likely fix this. To answer your question: If you do notice flickering I suggest of using a double buffer. Otherwise there is no reason too. Note that a double buffer is easy to implement or remove (in case you notice the performance loss outweighs the flickering). –  user8363 Sep 11 '12 at 9:39

I noticed that using doing double buffering like this :

  1. draw everything a invisible canvas
  2. copy invisible canvas to the real canvas

actually slows down the rendering (lower fps), instead of speeding it

share|improve this answer

There is no need to double buffer html5 games. The browser already handles this for you by only updating the canvas object after your script has run. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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