Klicken Sie mit der Maus auf Kreisleinwand und zeichnen Sie Linien?

Question

Wie das Klicken auf den Kreis begann, eine gerade Linie zu zeichnen, und wenn Sie auf den zweiten Punkt klicken, um die Linie zu stoppen? In meinem Fall löscht das Zeichnen einer Linie die gesamte Leinwand. Sorry für mein schlechtes Englisch

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

Sieht aus wie ein einfacher Tippfehler - ich denke du meinst ‚ctx‘ anstelle von ‚c‘ in Ihrer onmousemove Funktion