I'm working on a project in Django whereby I have one canvas element superimposed over another with functionality that allows me to mouseover the top canvas to reveal an image loaded into the canvas underneath it. The functionality works great however it seems to be wreaking havoc in other ways, namely:
The window width and height are larger than the canvases causing unnecessary scrolling. I want to get rid of this.
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.
I'm also having issues centering the canvases in the window.
My gut is telling me these problems have something to do with the fact that my canvas stack is set to absolute position while its parent div is set to relative (this is the functionality that allows me to stack canvases) but this is just a hunch.
I've looked at a variety of other similar SO questions, but none of their solutions worked for my code. Any help would be greatly appreciated. Thanks.
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>