多个叠加，右键保存只保存一个

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);
})()