Холст: Убрать функциональность полосы прокрутки и серые рамки/очертания?

Я работаю над проектом на Django, в котором у меня есть один элемент canvas, наложенный на другой с функцией, которая позволяет мне навести курсор мыши на верхний canvas, чтобы показать изображение, загруженное в canvas под ним. Функциональность работает отлично, однако, похоже, что она вносит хаос другими способами, а именно:

  1. The window width and height are larger than the canvases causing unnecessary scrolling. I want to get rid of this.

  2. There is a light grey border around my canvas elements and I can't get rid of it. Tried setting outline and border to none but no dice.

  3. I'm also having issues centering the canvases in the window.

Моя интуиция подсказывает мне, что эти проблемы как-то связаны с тем, что мой стек холстов установлен в абсолютную позицию, в то время как его родительский div установлен в относительную (это функциональность, которая позволяет мне складывать холсты), но это только догадка.

Я просмотрел множество других подобных вопросов SO, но ни одно из их решений не подошло для моего кода. Любая помощь будет очень признательна. Спасибо.

window.onload = function() {
    //Create Bottom canvas & context
    var canvas = document.getElementById('canvas');
    var ctxB = canvas.getContext('2d');

    //Create Top canvas & context
    var canvas2 = document.getElementById('canvas2');
    var ctxT = canvas2.getContext('2d');

    //Set waterfall image variable
    var waterfall = document.getElementById('waterfall');

    //Set canvas w&h properties
    canvas.width = canvas2.width = .25*waterfall.width;
    canvas.height = canvas2.height = .25*waterfall.height;

    //Populate Bottom canvas with image
    ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);

    //Populate Top canvas with white rectangle
    ctxT.fillStyle = "white";
    ctxT.fillRect(0, 0, canvas2.width, canvas2.height);

    //Erase Top canvas to reveal waterfall
    canvas2.addEventListener('mousemove', event => {
        var x = event.offsetX;
        var y = event.offsetY;  
        const eraseSize = 100;
        ctxT.clearRect(x-eraseSize/2, y-eraseSize/2, eraseSize, eraseSize);
    })
}
#stack {
    position: relative;
}
#stack canvas {
    position: absolute;
    display: block;
}
<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="{% static 'entrance/entrance.css' %}">
        <script src="{% static 'entrance/entrance.js' %}"></script>
    </head>

    <body>
        <p hidden>
            <img src="{% static 'entrance/Waterfall.jpg' %}" alt="issue here" id="waterfall" />
        </p>
        <div id="stack">
            <canvas id="canvas"></canvas>
            <canvas id="canvas2"></canvas>
        </div>
    </body>
</html>

Оказалось, что мне нужно закрыть и перезапустить мой локальный сервер в Django, чтобы увидеть некоторые изменения CSS. Я не уверен, почему так происходит, поскольку я всегда обновляю кэш браузера, когда сохраняю изменения в коде. Если у кого-то есть информация по этому поводу, я был бы рад любому пониманию.

Вернуться на верх