Joined October 2013
·
Oliver Häger
São Paulo Area, Brazil
·
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.
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