Холст не рисует / обновляет должным образом

Question

Я делаю графическую систему с помощью HTML canvas, и это в основном сделано, но у меня возникли некоторые проблемы с одной частью. Я уже понял, как заставить графические узлы появляться там, где хочет пользователь, но когда я использую тот же метод для элементов HTML, которые я добавил в DOM с JavaScript, это просто не будет работать. Я очень уверен, что проблема заключается в newCoordsX.value & newCoordsY.value, потому что система отображает график узла на экране в левом нижнем углу, но источник находится в верхнем правом углу, он не должен быть в левом нижнем углу без каких-либо инструкций для этого. Он не будет реагировать на любые входные данные, он будет только графически отображать узел внизу слева. Я хочу, чтобы он отображался на основе числа, которое вводит пользователь. Вот некоторая информация о переменных, которые вы увидите в программе. addN - это кнопка, которая преформирует событие при нажатии. nodeAr - это объект, который отслеживает количество нажатий на кнопку, чтобы он мог остановить отображение новых входов после 8 щелчков. chunk равно 75. Это количество пикселей между каждой точкой графика. node - это массив, в котором хранится каждый узел. update рисует узлы на графике. Если вам нужна дополнительная информация, я буду рад показать больше кода, просто дайте мне знать.

<div id="adda">
    <div id="add">Add another node</div>
</div>

addN.addEventListener("click", () => {
    let radius = 3;
    newCoordsX = document.createElement('input');
    newCoordsY = document.createElement('input');
    newCoordsX.placeholder = "X value";
    newCoordsY.placeholder = "Y value";
    newCoordsX.style.marginTop = margin + "px";
    newCoordsX.style.display = "block";
    newCoordsY.style.display = 'block';
    document.body.appendChild(newCoordsX);
    document.body.appendChild(newCoordsY);
    document.body.appendChild(document.createElement('br'));
    margin = 10;
    nodeAr.clicks +=1;

    let xPos = newCoordsX.value * chunk + 7;
    let yPos = 750 - newCoordsY.value * chunk - 4;

    if (nodeAr.clicks == 8){
        newCoordsX.style.display = 'none';
        newCoordsY.style.display = 'none';
        nodeAr.clicks--;
    };

    newCoordsX && newCoordsY.addEventListener("keydown", (ev) => {
        if (ev.keyCode == 13){
            node.push(new Node(xPos, yPos, radius));
            for (let i=0; i < node.length; i++){
                node[i].update(node);
            };
        };
    });
});