Having trouble with my JavaScript code. I created a function called drawLine to trace lines on a canvas from one point (x,y) to another point (xdest, ydest). The first few lines display correctly but after the fourth line, it stops working and I can't figure out why. Any ideas?
var canvas2 = document.getElementById("canvasMid");
var ctx = canvas2.getContext('2d');
ctx.fillStyle = color;
drawLine(ctx,(canvas.width/2),0,(canvas.width/2)-2,canvas.height,color,width);
drawLine(ctx,canvas.width/2,(1/5)*canvas.height,0,0,color,width);
drawLine(ctx,canvas.width/2,(1/6)*canvas.height,canvas.width,0,color,width);
//start of the part that's not working
drawLine(ctx,canvas.width/2,0.5*canvas.height,0,canvas.height,color,width);
console.log(canvas.width,canvas.height)
drawLine(ctx,canvas.width/2,(3/4)*canvas.height,canvas.width,canvas.height,color,width);
//end
}
function drawLine(ctx,x,y,xdest,ydest,color,width){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(xdest,ydest);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
ctx.closePath();
}
First line in the center; Second line on the left; Third line on the right