在圆形画布上单击鼠标并绘制线条？

Question

How to make clicking on the circle began to drawn a straight line and when you click on the second point stop draw line? In my case, drawing a line erases the entire canvas. Sorry for my bad English

   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

看起来像是一个简单的错字-我认为您在onmousemove函数中用的是'ctx'而不是'c'