JavaScript Canvas Flicker

Question

I have built this game using HTML Canvas, but I seem to get this odd behaviour in Mozilla Firefox. I seem to be getting a flicker effect. A brief moment of white followed by everything being drawn. I assume this has something to do with clearRect, but I would like other opinions on what it could be?

Providing a code sample/a link to the game in question/a fiddle/a minimum example would help. — Py., Sep 05 '11 at 10:34

score 1 · Accepted Answer · edited May 23 '17 at 10:27

You are probably looking for a double buffering solution - don't actually draw the canvas contents until you are done changing them. Using two canvas elements as suggested in Does HTML5/Canvas Support Double Buffering? should be indeed the best solution for games. If you create your "buffer canvas" dynamically and don't actually add it to the document it should improve drawing performance (the browser won't try to update the screen when you draw something to this canvas).

score 0 · Answer 2 · answered Sep 27 '15 at 17:24

0

Try using requestAnimationFrame, or just draw everything at a slower speed.

answered Sep 27 '15 at 17:24

DUUUDE123

166
1
10

score 0 · Answer 3 · edited Dec 08 '15 at 08:12

0

The FireFox canvas may flicker on updates. You can suppress this my specifying the "moz-opaque" attribute in the <canvas> tag. This tells Firefox that your canvas is not transparent, and it will "optimize" its painting of the canvas. A side effect is elimination of the flickering bug.

edited Dec 08 '15 at 08:12

Mr Lister

45,515
15
108
150

answered Dec 03 '15 at 15:24

Greg Searle

459
5
3

JavaScript Canvas Flicker

3 Answers3