title: Continuous hatch line needed in canvas with repeated pattern
body: <p>I am trying to build a hatch pattern using a combination of canvas and kinetic and I am having issues trying to get a continuous line.</p>
  
  <p>This <a href="http://jsfiddle.net/uW8xz/126/" rel="nofollow">jsfiddle</a> shows what I have so far, but because my repeat pattern is a sqaure the corners are affecting the line, I have tried using the lineJoin and lineCap properties, but cannot seem to get the desired result.</p>
  
  <p>The main code in question is this:</p>
  
  <pre><code>var hatchPattern = document.getElementById("canvas")
  var context = hatchPattern.getContext('2d');
  context.strokeStyle = "#FF0000";
  context.beginPath();
  context.moveTo(0, 20);
  context.lineTo(20, 0);
  context.lineWidth = 5;
  context.stroke();
  context.closePath();
  </code></pre>
  
  <p>Can anyone help?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have created another <a href="http://jsfiddle.net/uW8xz/160/" rel="nofollow">jsfiddle</a> which although not perfect, will probably do for me, still not sure why there is a slight gap though!</p>