23
\$\begingroup\$

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!

Improve this question
\$\endgroup\$
5
  • 2
    \$\begingroup\$ 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.) \$\endgroup\$
    – o0'.
    Nov 30, 2010 at 19:03
  • \$\begingroup\$ 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. \$\endgroup\$
    – michael.bartnett
    Dec 3, 2010 at 6:44
  • \$\begingroup\$ 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 \$\endgroup\$
    – Tor Valamo
    Dec 3, 2010 at 11:49
  • \$\begingroup\$ I think it is possible to capture keys so the browser windows doesn't act on them. \$\endgroup\$
    – AttackingHobo
    Dec 3, 2010 at 18:17
  • \$\begingroup\$ 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 :-). \$\endgroup\$
    – Petteri H
    Dec 3, 2010 at 18:47

3 Answers 3

Reset to default
14
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ 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). \$\endgroup\$
    – user8363
    Sep 11, 2012 at 9:39
5
\$\begingroup\$

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

Improve this answer
\$\endgroup\$
1
\$\begingroup\$

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

Improve this answer
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .