Joined October 2013
·

Oliver Häger

São Paulo Area, Brazil
·

Posted to Easy double buffering on HTML5 canvas over 1 year ago

Well, if it really reduced the flickering then think pragmatic and let it like this. Regarding the "double buffering" it seems that nowadays most browsers implement some double buffering. Take a look here: http://goo.gl/Ue05s7

Another very nice post on general Canvas performances is here: http://www.html5rocks.com/en/tutorials/canvas/performance/

One of the tips is about off-screen rendering to gain runtime performance. This is similar to classic double buffering (the author called it displaylist) and I make broad use of it. Not only for performance a important technique.

To effectively reduce flickering it is important to use requestAnimationFrame() instead of setInterval(). Here is some more detailed description, why to use requestAnimationFrame(): http://devbutze.blogspot.com.br/2013/09/requestanimationframe-is-what-you-need.html

Posted to Easy double buffering on HTML5 canvas over 1 year ago

Hi, nice try. But I fear that using save() and restore() does not have your described effect. save() does not save the canvas (or its content) but its state, like e.g transformation matrices and drawing colors. While save() pushes the current state on a stack, restore() pops it back. This has nothing to do with double buffering.

Achievements
1 Karma
0 Total ProTip Views