원 캔버스에서 마우스를 클릭하고 선을 그립니다.

Question

원을 클릭하는 방법은 직선을 그리기 시작하고 두 번째 점 정지 선을 클릭하면 어떻게됩니까? 내 경우에는 선을 그려 전체 캔버스를 지 웁니다. 내 나쁜 영어

var canvas = document.getElementById('circle'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 800; 
    canvas.height = 600; 

    var rect = can.getBoundingClientRect(); 


function dots1() { 
ctx.beginPath(); 
ctx.arc(50 , 80, 4, 0, 2*Math.PI, true); 
ctx.fillStyle ="#" + Math.floor(Math.random()*0xFFFFFF).toString(16); 
ctx.fill(); 
ctx.stroke(); 
}; 

function dots2() { 
ctx.beginPath(); 
ctx.arc(120 , 220, 4, 0, 2*Math.PI, true); 
ctx.fillStyle ="#" + Math.floor(Math.random()*0xFFFFFF).toString(16); 
ctx.fill(); 
ctx.stroke(); 
}; 

canvas.onmousemove = function() { 
     c.clearRect(0,0,canvas.width,canvas.height); 
     c.strokeStyle = 'blue'; 
     c.lineWidth = 1; 
     c.beginPath(); 
     c.moveTo(letsdraw.x, letsdraw.y); 
     c.lineTo(event.clientX - rect.left, event.clientY - rect.top); 
     c.stroke(); 


    }; 
    canvas.onmousedown = function() { 
     letsdraw = { 
     x:event.clientX - rect.left, 
     y:event.clientY - rect.top 
     }; 

    }; 
canvas.onmouseup = function() { 

    letsdraw = null; 

}; 

Answer 1

죄송 단순한 오타 것 같은데 - 내가