Как я могу получить положение элемента HTML при изменении размера окна браузера?

Question

У меня есть функция, которая рисует линию CANVAS и заставляет ее получить те же координаты <div>, используя offsetLeft. Строка ищет ту же позицию, что и <div>, что делает ее приклеенной к <div>. Она работает хорошо, НО ТОЛЬКО при загрузке страницы и обновлении браузера.

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

 const positionCanvas = () => {
   lineV.clearRect(0, 0, c.width, c.height);    
   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()     
}  

Я бы хотел, чтобы это работало хорошо каждый раз, особенно когда я занимаюсь изменением размеров окна. Как я могу решить это?

Пример:

1. Страница загружена: ХОРОШО!!! Линия холста наклеена на <div>

2. Пока пользователь вручную изменяет размер браузера окна: НЕ РАБОТАЕТ!!! Холст ищите <div> но не приклеивайте его, между ними есть расстояние.

3. После остановки изменения размера браузера: НЕ РАБОТАЕТ!!! линия все еще отделена от <div>

4. Обновите браузер на новую позицию: ХОРОШО!!! линия холста наклеена на <div>

Answer 1

Я нашел решение. Просто поместите функцию drawCanvas() в window.onresize вместо positionCanvas().

Просто так:

 window.onresize = () => {  
  drawCanvas()    
}