Анимация на canvas вырисовывает лишнюю линию на старте

Question

Есть canvas, при первом клике на него устанавливается "точка старта", при движении мышки от точки старта до мышки тянется линия, при втором клике линия закрывается и координаты начала/конца пишутся в массив. Анимация реализована через очистку канваса при движении мышки и повторную отрисовку линии.

Проблема: в момент, когда я начинаю новую линию (кликаю и начинаю двигать мышку), на долю секунды мигает линия, идущая от точки завершения предыдущей линии к мышке, а потом рисуется уже нормальная линия. Если кликнуть неудачно, то именно она пишется в массив. Не могу найти почему это происходит, HELP

    var draw,mouse, array = [],
    mouse = {},
    start_coords= {},
    resault_coords = {},
      preCanvas = document.getElementById("myPreCanvas"), 
                preContext = preCanvas.getContext("2d"),
                pre_w = preCanvas.width,
                pre_h = preCanvas.height;

preCanvas.addEventListener("mousedown", function(e){
  if (draw) { 
      draw=false 
      array.push([start_coords.x, start_coords.y, resault_coords.x, resault_coords.y]);
      preContext.clearRect(0, 0, pre_w, pre_h);
  } else {
      mouse.x = e.clientX - this.offsetLeft;
      mouse.y = e.clientY - this.offsetTop;
      start_coords.x=mouse.x ;
      start_coords.y=mouse.y ;   
      draw=true
  }
  });

preCanvas.addEventListener("mousemove", function(e){
  if(draw) {
      mouse.x = e.pageX - this.offsetLeft;
      mouse.y = e.pageY - this.offsetTop;

      preContext.clearRect(0, 0, pre_w, pre_h);
      preContext.beginPath();
      preContext.moveTo(start_coords.x, start_coords.y);
      preContext.lineTo(mouse.x, mouse.y);
      preContext.stroke();
      preContext.closePath();
  }
});

#myPreCanvas {
width: 100%;
height: 100%;
}

<canvas id='myPreCanvas' />

Answer 1

Чекнул, все работает верно. В предоставленном коде массив, в который добавляются координаты, не используется для отрисовки, так же, в него добавляются неинициализированные свойства объекта resault_coords.

БЛОГ НА HUSL

Анимация на canvas вырисовывает лишнюю линию на старте

Ответы (1 шт):