HTML5 Canvas slows down with each stroke and clear
The <canvas>
element keeps track of a current path (i.e., set of points, lines, and curves). canvas.moveTo
, canvas.lineTo
, and canvas.stroke
all operate on the current path. Every time you call canvas.moveTo
or canvas.lineTo
you are adding to the current path. As the path gets more and more complex, drawing gets slower and slower.
You can clear the path by calling canvas.beginPath()
. Doing this at the start of your draw function should get rid of the slowdown.