I've designed a web page that includes two canvas elements stacked on top of each other. The purpose of this setup is to allow me to "erase" the top canvas and reveal an image loaded into the bottom canvas. So far, this functionality has been working perfectly.
Now, my goal is to trigger an event once the top canvas has been completely "erased," meaning that all of the pixels in the top context are transparent. I've searched for solutions on Stack Overflow and found methods using getImageData to check a specific pixel's alpha value. However, I'm struggling to find a way to determine when the very last pixel's alpha value equals 0.
Included below is my code, along with an unfinished attempt to achieve this using a for-loop and if statement. I have also encountered another issue where using getImageData results in a thin grey border appearing around two edges of my canvas.
Thank you in advance for any assistance!
https://i.sstatic.net/gHs0X.png
window.onload = function() {
//Move speaker image across page
var speaker = document.getElementById('speaker');
speaker.onload = MoveElement(speaker, "right", 1000);
//Create canvases & contexts
var canvas = document.getElementById('canvas');
var ctxB = canvas.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctxT = canvas2.getContext('2d');
//Get waterfall image object
var waterfall = document.getElementById('waterfall');
//Set canvas w&h properties
canvas.width = canvas2.width = .3*waterfall.width;
canvas.height = canvas2.height = .3*waterfall.height;
//Populate Bottom canvas with waterfall 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);
//Make Top canvas "erasable"
canvas2.addEventListener('mousemove', event => {
var x = event.offsetX;
var y = event.offsetY;
const eraseSize = 125;
ctxT.clearRect(x-eraseSize/2, y-eraseSize/2, eraseSize, eraseSize);
})
//Attempt to trigger an event when all pixels of top canvas have alpha = 0
var imageDataTop = ctxT.getImageData(0, 0, canvas2.width, canvas2.height);
console.log(imageDataTop);
for (var i = 0; i < imageDataTop; i++) {
if (imageDataTop.data[i] = 0) {
//
}
}
}
function PlayAudio() {
document.getElementById('boyfriend').play();
}
//Move an element in a given direction a certain distance
function MoveElement(element, direction, totalDistance) {
//Determine horizontal or vertical direction
var LeftOrTop = (direction=="left" || direction=="right") ? "left" : "top";
//Set default frame distance
var frameDistance = 150;
//Adjust for backwards direction
if (direction=="left" || direction=="up") {
totalDistance *= -1;
frameDistance = -1;
}
//Get style data object for element
var elementStyle = window.getComputedStyle(element);
//Get Left or Top position of element
var positionValue = elementStyle.getPropertyValue(LeftOrTop).replace("px", "");
//Apply direction and distance change to element
var destination = (Number(positionValue) + totalDistance) + "px";
function MoveFrame() {
//If element reaches its destination...
if (elementStyle.getPropertyValue(LeftOrTop) == destination) {
//...stop the interval motion
clearInterval(movingFrames);
}
//Otherwise, continue the interval movement
else {
elementStyle = window.getComputedStyle(element);
positionValue = elementStyle.getPropertyValue(LeftOrTop).replace("px", "");
element.style[LeftOrTop] = (Number(positionValue) + frameDistance) + "px";
}
}
//Define time interval for movement
var movingFrames = setInterval(MoveFrame, 500);
}#stack {
position: relative;
}
#stack canvas {
position: absolute;
display: block;
left: 50%;
transform: translateX(-50%);
margin-top: 150px;
}
#speaker {
position: absolute;
top: 20px;
animation-duration: 800ms;
animation-name: fadein;
animation-iteration-count: 10;
}
@keyframes fadein {
from {
opacity: 0.25;
}
50% {
opacity: 1;
}
to {
opacity: 0.25;
}
}<!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>
<img src="{% static 'entrance/sound-icon.svg' %}" id="speaker" />
<p id="test"></p>
<audio id="boyfriend" source src="{% static 'entrance/02 30 Minute Boyfriend.mp3' %}" type="audio/mp3"></audio>
<div id="stack" onmouseenter="PlayAudio()">
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
</div>
</body>
</html>