kineticjs - Continuous hatch line needed in canvas with repeated pattern -

i trying build hatch pattern using combination of canvas , kinetic , having issues trying continuous line.

this jsfiddle shows have far, because repeat pattern sqaure corners affecting line, have tried using linejoin , linecap properties, cannot seem desired result.

the main code in question this:

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(); 

can help?

update:

i have created jsfiddle although not perfect, me, still not sure why there slight gap though!

to create diagonal lines covering canvas, can create pattern this:

you must fill top-left & bottom-right corner triangle. when repeated in pattern, these triangles fill in beveled corners caused center line coming point @ top-right & bottom-left

then createpattern(yourpattern,"repeat") pattern-fill canvas this:

here's example code , demo showing thinner lines:

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");    var p = document.createelement("canvas")  p.width=32;  p.height=16;  var pctx=p.getcontext('2d');    var x0=36;  var x1=-4;  var y0=-2;  var y1=18;  var offset=32;    pctx.strokestyle = "#ff0000";  pctx.linewidth=2;  pctx.beginpath();  pctx.moveto(x0,y0);  pctx.lineto(x1,y1);  pctx.moveto(x0-offset,y0);  pctx.lineto(x1-offset,y1);  pctx.moveto(x0+offset,y0);  pctx.lineto(x1+offset,y1);  pctx.stroke();    ctx.fillstyle=ctx.createpattern(p,'repeat');  ctx.fillrect(0,0,canvas.width,canvas.height);

#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>