title: Html 5 canvas avoid fill behaviour on overlap
body: <p><img src="https://i.stack.imgur.com/q8WQA.png" alt="Fill overlap colors"></p>
  
  <p>As you can see in the picture above I have visible lines between my isometric squares, this is caused by each square sligthly overlapping each other. Now the overlapping is unavoidable due to the coordinate system i use to draw with (And I don't want to change it).</p>
  
  <p>This is the code im using to draw the squares </p>
  
  <pre><code>cRenderContext.beginPath();
  
  cRenderContext.moveTo(iPosX, iPosY);
  cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY - iTileHeightIncrement);
  cRenderContext.lineTo(iPosX + iTileWidth, iPosY);
  cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY + iTileHeightIncrement);
  cRenderContext.lineTo(iPosX, iPosY);
  
  cRenderContext.fillStyle = "rgba(1, 0, 1, 1)";
  cRenderContext.fill();
  cRenderContext.closePath();
  </code></pre>
  
  <p>What I want to achieve is to draw the squares with out any visible outlines, so basically is there a way to stop fill doing what it currently is on overlap?</p>
  
  <p>EDIT: I will mention each square is drawn with a slightly different color so I can't just fill the whole area with one color and be done (it just looks all black but each color differs by 1 in either the red or blue channel)</p>