title: HTML5 Canvas transparency for all overlapping content
body: <p>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.</p>
  
  <p>i tried to use <code>globalAlpha</code> property but the overlap content is get bolder and bolder everytime i draw the line.</p>
  
  <pre><code>ctx.beginPath(); // init at onmousedown
  ctx.lineTo(x, y); // at onmousemove
  ctx.stroke(); // at onmousemove
  </code></pre>