javascript - HTML5 Canvas transparency for all overlapping content -

i made drawing app html5, it's basic paint/brush tool works good. problem is, don't know how make overlapping path have same opacity.

i tried use globalalpha property overlap content bolder , bolder everytime draw line.

ctx.beginpath(); // init @ onmousedown ctx.lineto(x, y); // @ onmousemove ctx.stroke(); // @ onmousemove 

edit: ok got wrong. need redraw canvas "background" before draw lines.

it looks have this: http://jsfiddle.net/4namg/2/

and think want this: http://jsfiddle.net/4namg/1/

the difference in second case redraw background. since don't special clear canvas:

ctx.clearrect(0, 0, c.width, c.height); 

edit: same example mouse button management , multi-path: http://jsfiddle.net/4namg/3/

(nb: cheated in case of single-point paths sake of clarity).