Novato aquí, experimentando. Estoy tratando de crear en html/javascript una sola imagen apilando capas seleccionadas al azar (ver el código a continuación). Sin embargo, cuando hago clic con el botón derecho en la imagen, solo se guarda la capa superior, no todas las capas. ¿Cómo soluciono esto (sería posible un botón si no usa ninguna biblioteca, lo mismo ocurre con las capturas de pantalla)?
¡Muchas gracias de antemano!
Patrón
//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>