Actualmente estoy tratando de agregar una marca de agua a una imagen y estoy usando este script:

 function mixImages(){ var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var imageObj1 = new Image(); var imageObj2 = new Image(); var marginTop = 10; var marginLeft = 10; imageObj1.src = "http://localhost:8080/sisop/storage/app/public/files/16522147787.png" imageObj1.onload = function() { ctx.drawImage(imageObj1, 0, 0, 328, 526); imageObj2.src = "http://localhost:8080/sisop/storage/app/public/files/165221397618.png"; imageObj2.onload = function() { ctx.drawImage(imageObj2, marginLeft, marginTop, 100, 100); var img = c.toDataURL("image/png"); } }; }

Lo cual funciona bien si solo lo hago con 1 lienzo. Pero estoy tratando de hacer esto dinámicamente con cada imagen que se carga en mi código PHP. así que estoy tratando de hacer esto:

 foreach($collection as $file){ echo " <div class='posts-cards'> <canvas id='myCanvas$file->id' width='300' height='300'></canvas> </div> <script> var c=document.getElementById('myCanvas$file->id'); var ctx=c.getContext('2d'); var imageObj1 = new Image(); var imageObj2 = new Image(); var marginTop = 10; var marginLeft = 10; imageObj1.src = 'http://localhost:8080/sisop/storage/app/public/files/16522147787.png' imageObj1.onload = function() { ctx.drawImage(imageObj1, 0, 0, 328, 526); imageObj2.src = 'http://localhost:8080/sisop/storage/app/public/files/165221397618.png'; imageObj2.onload = function() { ctx.drawImage(imageObj2, marginLeft, marginTop, 100, 100); var img = c.toDataURL('image/png'); } }; </script>

Pero por alguna razón, el resultado es este:

Tengo "display: flex; flex-flow: wrap;" en mi css (se supone que son 2 filas de 4 elementos en cada una), por lo que, por alguna razón, solo se generan las imágenes 5 y 8. Y como puede ver, solo la última imagen se ha "fusionado" con la otra imagen. Estoy bastante atrapado aquí y no entiendo muy bien lo que está pasando aquí..