Как получить координаты объекта в документе?

Необходимо получить координаты элемента в документе: метод getBoundingClientRect() каждый раз 
выдает новые координаты.
Задавал вопрос в chatGPT и предложили такой код: rect1 = wallsDotOne.getBoundingClientRect();
let scrollLeft = window.scrollX || document.documentElement.scrollLeft;
let scroollTop = window.scrollY || document.documentElement.scrollTop;


let elementTop = rect1.top + scroollTop;
let elementLeft = rect1.left + scrollLeft;

console.log(elementLeft);
console.log(elementTop);

Таким образом, как я понял, получаем координаты с учетом скролла. Но на выходе получаются невалидные координаты, которые никак не связаны с местоположением искомого элемента. А нужно получить координаты двух элементов внутри canvas и от одного из них провести линию к другому. Код CSS одной из начальных точек: .walls__desc-img{ position: relative; } .walls__desc-imgDotOne{ position: absolute; top: 87px; right: 131px; cursor: pointer; }

Скрин с точками: на здании самая верхняя - одна из начальных точек, координаты которой нужно получить. Черный фон - canvas.

<section class="walls  dark-theme">
    <div class="canvas__one">
        <canvas id="canvas__item-one"></canvas>
    </div>
    <div class="container">
       
        <div class="walls__title">
            <h2> <span>Стены </span>— ультрапрочный стеклофибробетон и <br> энергоэффективный 
цельнолитой <br>
                пенополиуретан
            </h2>
        </div>
        <div class="walls__desc">
            <div class="walls__desc-img">
                <img src="../../img/walls/illustration.png" alt="">
                <img class="walls__desc-imgDotOne" src="../../img/walls/dot.svg" alt="">
                <img class="walls__desc-imgDotTwo" src="../../img/walls/dot.svg" alt="">
                <img class="walls__desc-imgDotThree" src="../../img/walls/dot.svg" alt="">
            </div>