HTML5 холст рисовать линию между mousedown и mouseup

Question

Как нарисовать линию, используя html5 canvas между mousedown и mouseup кнопки.Пока кнопка нажата (mousedown), линия рисуется и останавливается при отпускании мыши

<button id="drawLine" onmousedown="mouseDown()" onmouseup="mouseUp()">Draw 
 Line</button>
<canvas id="myCanvas" width="200" height="200" ></canvas>

var el=document.getElementById("drawLine");
var canvasEl=document.getElementById("myCanvas");
var line= canvasEl.getContext("2d");
var flag;
var count = 30;
line.beginPath();
line.moveTo(30,30)

function mouseDown(){
   flag =true;
   while(mdflag){
     line.lineTo(count++,30);
     line.stroke();
   }
}
function mouseUp(){
  flag = false;
}

Answer 1

Ваша проблема в том, что ваш while вызывает бесконечный цикл, поскольку никакой другой код не сможет работать, пока работает ваш цикл while.Таким образом, даже когда вы отпустите кнопку, ваш цикл while продолжит работать.Вместо этого вы можете использовать setInterval и присвоить его переменной.Функция внутри setInterval будет вызываться каждые 100 м / с и действует как цикл.Затем, отпустив кнопку мыши, вы можете остановить цикл (интервал), используя clearInterval().

См. Рабочий пример ниже:

var el = document.getElementById("drawLine");
var canvasEl = document.getElementById("myCanvas");
var line = canvasEl.getContext("2d");
var drawLoop;
var count = 30;
line.beginPath();
line.moveTo(30, 30)

function mouseDown() {
  drawLoop = setInterval(function() {   
      line.lineTo(count++, 30);
      line.stroke();
  }, 100);
}

function mouseUp() {
  clearInterval(drawLoop);
}

<button id="drawLine" onmousedown="mouseDown()" onmouseup="mouseUp()">Draw 
 Line</button>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid black;"></canvas>