I have reviewed many canvas z-index posts here, including:
HTML5 Canvas layer issue
Multi Layer Canvas HTML5
html5 - canvas element - Multiple layers
but I am not finding the answer to my issue.
I am trying to simply place one canvas directly behind another canvas. When a user clicks on the canvas, it will change the stacking order. But instead of the canvases being behind and in front of each other, they can both be seen, one on top, and one beneath it (not behind it) (see https://i.sstatic.net/ALWM7.jpg).
HTML and CSS:
<div id="preview" style="visibility:hidden;">
<canvas id="cOriginal" width="2" height="1" onclick="clickCompare()" style="position:relative; z-index:2; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cPreview" width="2" height="1" onclick="clickCompare()" style="position:relative; z-index:1; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cSave" width="2" height="1" style="position:relative; z-index:0; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
</div>
Thank you very much!
EDIT: Updating my question to show the current problem.
HTML:
<div id="preview" style="visibility:hidden; position:relative;">
<canvas id="cOriginal" width="2" height="1" onclick="clickCompare()" style="position:absolute; z-index:2; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cPreview" width="2" height="1" onclick="clickCompare()" style="position:absolute; z-index:1; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cSave" width="2" height="1" style="position:absolute; z-index:0; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
</div>
CSS (centering code):
<style>
#cOriginal, #cPreview, #cSave { max-width: 100%; display: block; margin: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; }
</style>
The canvases are now layered and centered. But everything following the canvases has broken. See https://i.sstatic.net/UlD1E.jpg. Thank you!
First time answering on SO, but I believe I have the answer to your question.
I redid the HTML and JavaScript to be as simplistic as possible, since your question seems to be at the root of it all, asking for help on changing canvas layering, so I did it as simply as I could think of, here is the code, followed by a link to the codepen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas Layering</title>
</head>
<body>
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0; background-image: url(https://static.pexels.com/photos/158780/leaf-nature-green-spring-158780.jpeg);" onclick="ChangePicture(1)"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1; background-image: url(https://static.pexels.com/photos/54320/rose-roses-flowers-red-54320.jpeg);" onclick="ChangePicture(2)"></canvas>
<canvas id="layer3" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 2; background-image: url(https://static.pexels.com/photos/5412/water-blue-ocean.jpg);" onclick="ChangePicture(3)"></canvas>
</div>
</body>
<script>
function ChangePicture(layerNumber) {
if (layerNumber === 1) {
document.getElementById("layer1").style.zIndex = "0";
document.getElementById("layer2").style.zIndex = "2";
document.getElementById("layer3").style.zIndex = "1";
} else if (layerNumber === 2) {
document.getElementById("layer1").style.zIndex = "1";
document.getElementById("layer2").style.zIndex = "0";
document.getElementById("layer3").style.zIndex = "2";
} else if (layerNumber === 3) {
document.getElementById("layer1").style.zIndex = "2";
document.getElementById("layer2").style.zIndex = "1";
document.getElementById("layer3").style.zIndex = "0";
} else {
console.log("Failed.");
}
}
</script>
</html>
https://codepen.io/levi_blodgett/pen/KQyWoR
If you want to change what picture starts as the default, simply change the z-index for the styling inside the html.