I am currently developing a Django project where I have two canvas elements stacked on top of each other. The top canvas has functionality that allows me to mouseover it and reveal an image loaded into the canvas below. While this functionality works well, it is causing some issues:
The window size is larger than the canvases, leading to unnecessary scrolling. I need to fix this.
There is a light grey border around my canvas elements that I can't seem to remove, despite trying various solutions.
I am also struggling to center the canvases within the window.
I suspect that these problems may be related to the absolute positioning of the canvas stack and their relative parent div (which is necessary for stacking), but I'm not entirely sure.
I have explored similar questions on SO, but none of the solutions have worked for my specific code. Any assistance would be greatly appreciated. Thank you.
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>