Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>There are two ways you can do it that may reduce the flickering, esp if you have many circles.</p> <p>One is double buffering, and for a brief question on this you can look at: <a href="https://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering">Does HTML5/Canvas Support Double Buffering?</a></p> <p>Basically, you draw on two canvases, and swap them in and out as needed.</p> <p>This would be the preferable option, esp with many changes per frame, but, the other way I have done this is to just draw over the circle I want to erase, using the background color, then draw with the correct color the new circle.</p> <p>The only problem is that there is a small chance that you may leave some evidence of the attempted erasing, as it seems that for some shapes it is hard to get it to draw exactly on top.</p> <p><strong>UPDATE:</strong></p> <p>Based on a comment you can look at this discussion about double buffering on the canvas:</p> <p><a href="https://stackoverflow.com/questions/4539535/javascript-canvas-double-buffering-frame-rate-issues">HTML canvas double buffering frame-rate issues</a></p> <p>The basic idea is to keep track of everything you have drawn, with the current position, then on a separate canvas, you redraw everything, then, flip them out, and then I would just redraw again, in the new positions, to ensure that the image looks exactly like it should. Swapping them in and out is a quick operation, the only problem would be if you put event handlers on the canvas, in this case, have them on the div or span surrounding the canvas, so this information doesn't get lost.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload