여기서 그리면 선이 아니라 끊어지면서 나오는데 어떻게 이어야할까요?

html

   <canvas id="myCanvas" width="500" height="500"></canvas>

스크립트

 window.onload = function(){
         click = false;
         var width =$('canvas').css('borderLeftWidth');
         ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
  
  $(window).mousedown(function(){
    click = true;
  });
  
  $(window).mouseup(function(){
    click = false;
  });
  
  $('canvas').mousedown(function(e){
    draw(e.pageX, e.pageY);
  });
  
  $('canvas').mouseup(function(e){
    draw(e.pageX, e.pageY);
  });
    
  $('canvas').mousemove(function(e){
    if(click === true){
      draw(e.pageX, e.pageY);
    }
  })
  function draw(X,Y){
      console.log(X+","+Y)
      ctx.beginPath();
      ctx.moveTo(X,Y);
    ctx.lineTo(X+1,Y+1);
      ctx.stroke();
  }
};