多个覆盖，右键单击保存仅保存一个

Question

这里是新手，正在进行实验。我试图通过堆叠随机选择的层，在html/javascript中创建一个单独的图像(见下面的代码(。但是，当我右键单击图像时，它只保存顶层，而不是所有层。我该如何解决这个问题(如果不使用任何库，就可以使用按钮——屏幕截图也是如此(？

非常感谢！

跳跃

//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);

Answer 1

<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>

Answer 2

(async () => {
innerImage(0);
innerImage(1);
innerImage(2);
})()