Html5 Canvas Transparency For All Overlapping Content

I made an Drawing App with HTML5, it's just a basic paint/brush tool that currently works good. the problem is, i don't know how to make overlapping path have the same opacity. i t

Solution 1:

Edit: OK I got it all wrong. Basically all you need is to redraw your canvas "background" before you draw your lines.

It looks like you have this: http://jsfiddle.net/4naMG/2/

And I think you want this: http://jsfiddle.net/4naMG/1/

The only difference is that in the second case I redraw the background. Since I don't do anything special I just clear the canvas:

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

Edit: same example with mouse button management and multi-path: http://jsfiddle.net/4naMG/3/

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