Question

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?

Answer 1

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/