Как остановить умножение линии холста при изменении размеров окна?

Question

У меня есть функция, которая рисует линию CANVAS и заставляет ее получать те же координаты <div> с помощью offsetLeft и перемещать ее поиск в ту же позицию, что и <div>. Это работает хорошо.

 drawCanvas() {
   const c = document.getElementById("canvas");
   const lineH = c.getContext("2d");      
   c.width = window.innerWidth;
   c.height = window.innerHeight;

const positionCanvas = () => {
 const divPosition = document.querySelector('.myDiv').offsetLeft        

  lineV.fillStyle = "grey";
  lineV.fillRect(divPosition , 0, 2, window.innerHeight);
  lineV.fill();
}

positionCanvas() 

window.onresize = () => {    
  lineV.height = window.innerHeight; 
  positionCanvas()     
}  

Проблема в том, что я не знаю, как избежать поведения CANVAS по умолчанию, которое многократно повторяет строку при изменении размеров окон. Как мне это решить? Спасибо

Answer 1

Ответ:

  const positionCanvas = () => {
    lineV.clearRect(0, 0, c.width, c.height); //<-- new line added in the code
    //... rest of the code ommited