当我有多个图像时，绘制图像无法正常工作

Question

I was trying to make license(s). Everything is oka, except for the images. When I have a canvas only it works fine, but when I add another one the last license image paints in the first one, I don't know how to explain it very well. I have this to make the canvas. Thanks in advance.

Btw, I've already searched around for information about this, but I'm not clear about how to implement some solutions in my code. Thanks for reading.

function mostrarRegs() {
  try {
    dst = document.querySelector("#divDatos");
    dst.innerHTML = "";
    var fotos = [];
    var iterador = 0;
    for (x = 0; x < datos.regs.length; x++) {
      fotos.push(datos.regs[x].foto);
    }
    console.log(fotos);
    baseImg = new Image();
    console.log("np");
    baseImg.onload = function() {
      console.log("aqui");
      cedFoto = new Image();
      for (f = 0; f < datos.regs.length; f++) {
        cedFoto.onload = function() {
          zodImg = new Image();
          zodImg.onload = function() {
            for (let i = 0; i < datos.regs.length; i++) {
              var posX = 0;
              var posY = 0;
              spaceFromPic = 105;
              div = dce("div");
              canvas = dce("canvas");
              ctx = canvas.getContext("2d");
              canvas.setAttribute("height", "225px");
              canvas.setAttribute("width", "360px");
              div.setAttribute("style", "margin:8px;")
              ctx.drawImage(baseImg, 0, 0);
              //cedula
              ctx.font = "bold 17pt -apple-system, BlinkMacSystemFont";
              ctx.fillText(datos.regs[i].cedula, 130, 70);
              //foto
              console.log("drawCed");
              ctx.drawImage(cedFoto, 8, 50, 90, 110)
              //lugar nac ref
              ctx.font = "100 11px Verdana";
              ctx.fillText("LUGAR DE NACIMIENTO:", spaceFromPic, 86);
              //lugar nac src
              ctx.font = "bold 14px Arial";
              ctx.fillText(datos.regs[i].lugarNac, spaceFromPic, 86 + 15);
              //fecha nac ref
              ctx.font = "100 11px Verdana";
              ctx.fillText("FECHA DE NACIMIENTO:", spaceFromPic, 130);
              //fecha nac src
              date = new Date(datos.regs[i].fechaNac);
              ctx.font = "bold 14px Arial";
              ctx.fillText(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(), spaceFromPic, 130 + 15);
              //nombres
              ctx.font = "bold 17px Arial";
              ctx.fillText(datos.regs[i].nombre, spaceFromPic - 97, 180);
              //apellidos
              ctx.font = "bold 17px Arial";
              ctx.fillText(datos.regs[i].apellido, spaceFromPic - 97, 180 + 18);
              //signo zod ref
              ctx.font = "100 11px Verdana";
              ctx.fillText("ZODIACO:", spaceFromPic + 120, 155);
              //signo zod src
              ctx.font = "bold 14px Arial";
              ctx.fillText(datos.regs[i].SignoZodiacal, spaceFromPic + 120, 155 + 15);
              //signo zod img
              ctx.drawImage(zodImg, spaceFromPic + 185, 129, 60, 60)
              //--BTNs
              btnDownloadPNG = dce("btn")
              btnDownloadJPG = dce("btn")
              btnDownloadPDF = dce("btn");
              btnDownloadPNG.setAttribute("class", "btn btn-primary")
              btnDownloadPNG.setAttribute("style", "margin:2px;")
              btnDownloadPNG.setAttribute("id", "btnDownloadPNG" + i)
              btnDownloadPNG.innerHTML = "Descargar PNG";
              btnDownloadPNG.setAttribute("onclick", "downloadPNG(" + i + ")");
              btnDownloadJPG.setAttribute("class", "btn btn-warning");
              btnDownloadJPG.setAttribute("style", "margin:2px;")
              btnDownloadJPG.innerHTML = "JPG"
              btnDownloadJPG.setAttribute("onclick", "downloadJPG(" + i + ")");
              btnDownloadJPG.setAttribute("id", "btnDownloadJPG" + i);
              btnDownloadPDF.setAttribute("class", "btn btn-danger")
              btnDownloadPDF.setAttribute("style", "margin:2px;")
              btnDownloadPDF.innerHTML = "PDF"
              btnDownloadPDF.setAttribute("onclick", "downloadPDF(" + i + ")");
              //--
              div.appendChild(canvas)
              div.appendChild(dce("br"))
              div.appendChild(btnDownloadPNG)
              div.appendChild(btnDownloadJPG)
              div.appendChild(btnDownloadPDF)
              dst.appendChild(div);
              ceds.push(canvas);
            }
          }
          zodImg.src = "imgs/signosZodiacalesImgs/Tauro.png";
        }
        console.log(fotos)
        console.log(fotos[iterador])
        cedFoto.src = fotos[iterador];
        iterador++;
      }
    }
    console.log("salto");
    baseImg.src = "imgs/ced.jpg"
  } catch {}
}

Answer 1

You incurred in a hoisting issue: Fix: use let keyword instead of var

for(let x = 0; x < datos.regs.length; x++){
   fotos.push(datos.regs[x].foto);
}

Answer 2

First remove the for with the iterator f remove it and their brackets (obviously).

Use a function where you load the image, let's call it setImage() it'll receive the variable i (from the for) the element cedFoto , a reference to the image that you want to draw and a reference to the context.

By the way, define your array fotos (the array that will store the images sources) in the start of your code. And fill it in the function mostrarRegs , if not, you may have duplicated images. So, AT START:

var fotos = []

At mostrarRegs() function do this:

fotos = []
for(let x = 0; x < datos.regs.length; x++){
   fotos.push(datos.regs[x].foto);
}

You must do fotos = [] if not, you may have duplicated values when adding a new license.

Create the setImage function;

function setImage(index, image, canvasContext){
    image.onload = function(){
       canvasContext.drawImage(image, 8, 50, 90, 110);
    }
    image.src = fotos[index];
}

As we don't need the cedFoto.onload and zodImg.onload in the mostrarRegs() function, remove that.

So, your mostrarRegs() function (after changes):

function mostrarRegs(){
    try{
        dst = document.querySelector("#divDatos");
        dst.innerHTML = "";
        fotos = []
        var iterador=0;
        for(let x = 0; x < datos.regs.length; x++){
            fotos.push(datos.regs[x].foto);
        }

        baseImg = new Image();
        baseImg.onload = function(){
            for(let i = 0; i < datos.regs.length; i++){
                var posX = 0;
                var posY = 0;
                spaceFromPic = 105;
                div = dce("div");
                var canvas = dce("canvas");
                var ctx = canvas.getContext("2d");
                canvas.setAttribute("height", "225px");
                canvas.setAttribute("width","360px");
                div.setAttribute("style", "margin:8px;")

                ctx.drawImage(baseImg, 0, 0);

                //cedula
                ctx.font = "bold 17pt -apple-system, BlinkMacSystemFont";
                ctx.fillText(datos.regs[i].cedula, 130, 70);

                //foto
                cedFoto = new Image();
                setImage(i, cedFoto, ctx); 

                //lugar nac ref
                ctx.font = "100 11px Verdana";
                ctx.fillText("LUGAR DE NACIMIENTO:", spaceFromPic, 86);

                //lugar nac src
                ctx.font = "bold 14px Arial";
                ctx.fillText(datos.regs[i].lugarNac, spaceFromPic, 86+15);

                //fecha nac ref
                ctx.font = "100 11px Verdana";
                ctx.fillText("FECHA DE NACIMIENTO:", spaceFromPic, 130);

                //fecha nac src
                date = new Date(datos.regs[i].fechaNac);
                ctx.font = "bold 14px Arial";
                ctx.fillText(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(), spaceFromPic, 130+15);

                //nombres
                ctx.font = "bold 17px Arial";
                ctx.fillText(datos.regs[i].nombre, spaceFromPic-97, 180);

                //apellidos
                ctx.font = "bold 17px Arial";
                ctx.fillText(datos.regs[i].apellido, spaceFromPic-97, 180+18);

                //signo zod ref
                ctx.font = "100 11px Verdana";
                ctx.fillText("ZODIACO:", spaceFromPic+120, 155);
                //signo zod src
                ctx.font = "bold 14px Arial";

                ctx.fillText(datos.regs[i].SignoZodiacal, spaceFromPic+120, 155+15);

                //signo zod img
                /*zodImg = new Image();
                zodImg.onload = async function(){
                    ctx.drawImage(zodImg, spaceFromPic+185, 129, 60, 60)
                };
                zodImg.src = "imgs/signosZodiacalesImgs/"+datos.regs[i].SignoZodiacal+".png";*/
                zodImg = new Image();
                //setZodImage(i, zodImg, ctx); 
                //BTW: it's almost the same for the zodiac image.

                //--BTNs
                btnDownloadPNG = dce("btn")
                btnDownloadJPG = dce("btn")
                btnDownloadPDF = dce("btn");

                btnDownloadPNG.setAttribute("class", "btn btn-primary")
                btnDownloadPNG.setAttribute("style", "margin:2px;")  
                btnDownloadPNG.setAttribute("id", "btnDownloadPNG"+i)  
                btnDownloadPNG.innerHTML = "Descargar PNG";
                btnDownloadPNG.setAttribute("onclick", "downloadPNG("+i+")");

                btnDownloadJPG.setAttribute("class", "btn btn-warning");
                btnDownloadJPG.setAttribute("style", "margin:2px;")
                btnDownloadJPG.innerHTML = "JPG"
                btnDownloadJPG.setAttribute("onclick", "downloadJPG("+i+")");
                btnDownloadJPG.setAttribute("id", "btnDownloadJPG"+i);

                btnDownloadPDF.setAttribute("class", "btn btn-danger")
                btnDownloadPDF.setAttribute("style", "margin:2px;")
                btnDownloadPDF.innerHTML = "PDF"
                btnDownloadPDF.setAttribute("onclick", "downloadPDF("+i+")");

                //--
                div.appendChild(canvas)
                div.appendChild(dce("br"))
                div.appendChild(btnDownloadPNG)
                div.appendChild(btnDownloadJPG)
                div.appendChild(btnDownloadPDF)
                dst.appendChild(div);

                ceds.push(canvas);

                }
            }
            baseImg.src = "imgs/ced.jpg"
    }catch{}
}

Almost the same for the zodiac image.