Newbie here, experimenting. I'm trying to create in html/javascript a single image by stacking randomly selected layers (see code below). However, when I right-click the image it only saves the top layer, not all layers. How do I fix this (a button would be possible if it does not use any libraries -same goes for screenshots)?
Many thanks in advance!
Skipper
//html
<div><div id="layers"></div>
<canvas id="canvas1"></canvas>
// script
//create and attach layer1 to body;
var img = document.createElement('img');
img.alt = "Layer1";
img.src = layer1_array[getRandomInt(0,3)];
img.setAttribute("id","myImg");
img.style.decoding = "async";
document.getElementById("layers").appendChild(img);
//create and attach layer1 to body;
var img = document.createElement('img');
img.alt = "Layer2";
img.src = layer2_array[getRandomInt(0,3)];
img.setAttribute("id","myImg");
img.style.decoding = "async";
document.getElementById("layers").appendChild(img);
(async () => {
innerImage(0);
innerImage(1);
innerImage(2);
})()
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext("2d");
const arrayImage = ["./img/img1.png", "./img/img2.png", "./img/img3.png"];
const innerImage = (index) => {
const image = new Image(canvas.width, canvas.height);
image.addEventListener("load", () => {
ctx.drawImage(image, 0, 0);
});
image.src = arrayImage[index];
};
innerImage(0);
innerImage(2);
innerImage(1);
</script>