мой ввод холста ускользает от заголовка htmk

Question

Я делаю поиск пути html.

Я пытаюсь провести линию головы над моим холстом. Но если я это сделаю, холст проскальзывает в заголовок, а ввод неверен.

Я пытался поместить их в 2 отдельных блока, но это не сработало. Как решить эту проблему?

<div>
    <h1 style="color: white; background-color:purple;font-family: Comic Sans MS;">
        Welocome
    </h1>
</div>
<div><canvas id="gc"></canvas></div>

     document.addEventListener("click", onClick);
    function click(squares){
    clicX = e.pageX;
    clicY = e.pageY;
    isChanged = false;
    squars.forEach(colum => {
        colum.forEach(squar => {
            x = squar[0];
            y = squar[1];
    if (clicX >= x+seperate && clicX <= x+seperate+width 
                && clicY >= y+seperate && clicY <= y+seperate+height) {
                    if (e.button == 2) {
                        squar[2] = isStart? "red":"blue"; //if there is start so it gone to red for end
                        isChanged = true;
                    }
                    else if (squar[2] != "grey") {
                        squar[2] = "grey";
                    }
                    else{
                        squar[2] = "black";
                    }
                    printSquares();
            }
        });
    });
    isChanged ? isStart = !isStart : false;
    isChanged = false;
    return false;
}

Answer 1

Мое решение заключалось в том, что мне нужно было внести поправки для каждого элемента, который я вставил html do c. корректировки в коде были в clickY. Я вызываю c сдвиг, который делает div, и вычитаю сдвиг для var. например:

pageShift = 65;
clicX = e.pageX;
clicY = e.pageY-pageShift;