HTML5 Canvas drawing is layering a new path over the existing path at each new point. Why?

This is hard to explain so I created a JS Fiddle to show what is going on: http://jsfiddle.net/dGdxS/ - (Webkit only) Just mouse over the canvas 开发者_运维百科to draw - you may need to click around

I noticed the performance of the canvas was not what I expected, and when I set the line alpha I think I see why.

It looks like every new point I add to the drawing it is layering a completely new line over the previous line. The stroke alpha is set to 1%, and when you draw the older areas of the stroke begin to darken as the layers build up.

I assume I am doing something wrong. Do I need to clear the canvas before drawing to it at each new point?

HTML5 canvas does not come with an endPath method, but instead you can call context.beginPath() again to close the current path and begin a new one.

This is as opposed to calling context.closePath(), which will actually draw a line to the beginning of the current path, but not end it. If you were to draw again, the pen will simply continue drawing from that same point that closed the path. See this excellent related SO answer for more details and explanations.

Because you never call ctx.closePath();, so it will redraw the entire path from the beginning each time.

So you really want something similar to this:

http://jsfiddle.net/dGdxS/7/