Search code examples
javascripthtmlbuffering

Html5 Flickering Javascript


I am working on a basic game in javascript. I don't use jQuery. The thing is that I have trouble in getting rid of the flickering. I noticed it happens because of the canvas clearing command. I read a lot of suggestions that recommended a sort of double buffering like having a buffer canvas on which I should draw which is not visible and another canvas which is visible and all the content is copied from the buffer. However, I doubt that even if I implement this I would still have the flickering as I still have to clear the visible canvas.

The final question is : What is the best way of getting rid of the flickering in my code? Thank you for your help.

this is a sample of my code:

http://edumax.org.ro/extra/new/Scratch.html


Solution

  • In your draw() method you call loadImages(), hence loading the images every time you redraw, ie every time the apple moves, hence the flickering.

    Just put some breakpoints in your draw method it will all become pretty clear.

    I guess what you want to do is to load the images at loading time then just draw... no need to load on every move.