title: Drawing overlapping semi-transparent lines without visible overlap
body: <p>I'm developing a painter program using HTML5 canvas. I have created a drawing tool where the user drags and moves the mouse.</p>
  
  <p>I have a listener on <code>mousemove</code> event that draws short lines:</p>
  
  <pre><code>Painter.mainCanvas.beginPath();
  Painter.mainCanvas.moveTo(Painter.lastX, Painter.lastY);
  Painter.lastX = e.offsetX;
  Painter.lastY = e.offsetY;
  Painter.mainCanvas.lineTo(Painter.lastX, Painter.lastY);
  Painter.mainCanvas.stroke();
  </code></pre>
  
  <p>Everything works well until I set the global Alpha to &lt; 1. When using this method to draw, the end dot is also start dot. So the dot is drawn twice. And because we have transparent color, the dot now has different color with other dots in line.</p>
  
  <p>I tried another method that when mousemove fires, it only uses <code>lineTo()</code> and <code>stroke()</code> when mouseup fires.</p>
  
  <p>This solves the double drawing problem, but also introduces a new problem: when user intend to draw same dot twice, ie, cross line without mouseup, the dot won't be drawn twice. Because <code>lineTo()</code> function won't draw a dot twice without stroke between.</p>