HTML5 Canvas Ghosting Animation Issue?

Question

I have been looking at plenty of tutorials on how to do proper HTML5 animations using javascript and request animation frame and even in the demos it seems like the animations look blury like the image being redrawn leaves a ghosted image of itself behind for a breif second. But then I see games like microsofts ported version of cut the rope that appears to have fixed this issue. Does anyone know a way to make this canvas effect less apparent?

Answer 1

I'm guessing the problem you have is that the new image is being redrawn before the previous image was cleared. I suggest making sure the canvas is cleared, or at least the area in which the image is being re-drawn. Although, I experimented with clearing the whole canvas vs clearing a specific section of the canvas, and up to a certain size (roughly 800x600), clearing the whole canvas was faster.

I use canvas for my (in-progress) game: http://www.dacheng.me/dBoom

Feel free to browse the JS source code!

Answer 2

I think what you're looking for is window buffering:

http://en.wikipedia.org/wiki/Multiple_buffering

Basically the idea is to use two different windows/canvas elements that are interchanged after being drawn completely so that you're switching between fully drawn "frames". This technique is used in OpenGL and almost any other legitimate graphics program that exists today.