我的画布被另一个条形码画布覆盖

Question

我有一个函数可以绘制一个画布，然后在里面绘制另一个画布以获取条形码。似乎要覆盖它。

function generateCard(userId, users, cardIMG){
    if (canvas.getContext) {
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FFFFFF"; // white background color
    ctx.fillRect(0, 0, canvas.width, canvas.height);
        //blue
    ctx.beginPath();
    ctx.moveTo(0, 0);
        ctx.lineTo(1000, 0);
    ctx.lineTo(1000,60);
    ctx.lineTo(500,60);
    ctx.lineTo(350,180);
    ctx.lineTo(30,180);
    ctx.lineTo(0,200);
    ctx.lineTo(0,0);
    ctx.stroke();
        ctx.fillStyle = "#002D62";
    ctx.fill();
        //yellow right 
    ctx.beginPath();
    ctx.moveTo(1000, 60);
    ctx.lineTo(1000,80);
    ctx.lineTo(500, 80);
    ctx.lineTo(530, 60);
    ctx.lineTo(1000, 60);
    ctx.stroke();
    ctx.fillStyle = "#FFFD37";
    ctx.fill();
    //yellow left
    ctx.beginPath();
    ctx.moveTo(0, 200);
    ctx.lineTo(300, 200);
    ctx.lineTo(330, 180);
    ctx.lineTo(30, 180);
    ctx.lineTo(0, 200);
    ctx.stroke();
    ctx.fillStyle = "#FFFD37";
    ctx.fill();
    //profile border
    ctx.beginPath();
    ctx.moveTo(50, 244);
    ctx.lineTo(350, 244);
    ctx.lineTo(350, 545);
    ctx.lineTo(50, 545);
        ctx.lineTo(50, 240);
    ctx.strokeStyle = "#002D62";
    ctx.lineWidth = 8;
    ctx.stroke();
    //underline
    ctx.beginPath();
    ctx.moveTo(600, 225);
    ctx.lineTo(790, 225);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    ctx.stroke();
    
    ctx.font = "bold 18px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("WENCESLAO Q. VINZONS MEMORIAL LIBRARY",500,120);
    ctx.font = "italic 18px Arial";
    ctx.fillText("CAMARINES NORTE PROVINCIAL LIBRARY",525,145);
    ctx.font = "italic 13px Arial";
    ctx.fillText("DAET, CAMARINES NORTE",630,170);
    ctx.font = "bold 25px Arial";
    ctx.fillText("LIBRARY CARD",600,220);
    ctx.font = "bold 18px Arial";
    ctx.fillText("NAME:",460,270);
    ctx.fillText("ADDRESS:",460,310);
    ctx.fillText("DATE OF BIRTH:",460,350);
    ctx.fillText("DATE ISSUED:",460,390);
    ctx.fillText("VALID UNTIL:",460,430);

数据来自firebase，甚至条形码使用的userId。

    ctx.fillText(users.firstname + " " + users.lastname,640,270);
    ctx.fillText(users.street + ", " + users.cityProvince,640,310);
    ctx.fillText(users.birthmonth + "-" + users.birthday + "-" + users.birthyear,640,350);
    ctx.fillText(users.issued,640,390);
    ctx.fillText(users.exp,640,430);
    
    let liblogo = new Image();
    let camnorte = new Image();
    let profile = new Image();

它似乎先加载画布，然后再被覆盖。我尝试在里面制作一张新画布，但它没有显示，所以我做了这个。

    liblogo.src = "/Library User Creation/res/liblogotransparent.png";
    camnorte.src = "/Library User Creation/res/camnortelogo.png";
    profile.src = "/Library User Creation/res/profilewithbg.png";
    profile.src = cardIMG;
    Promise.all([liblogo, camnorte, profile].map(image => new Promise((resolve, reject) =>{
            image.onload = resolve;
            image.onerror = reject;
        })))
        .then(() => {
            ctx.drawImage(liblogo, 150, 25, 130, 130);
            ctx.drawImage(camnorte, 40, 40, 100, 100);
            ctx.drawImage(profile, 50, 245, 300, 300);
            JsBarcode(canvas, userId, {
                format: "CODE39",
                width: 2,
                height: 80,
                displayValue: false
            });
        })
    .catch(error => console.error("Error loading images:", error));
}

}

Answer 1

我用这个代替，它终于出现了

let barcodeCanvas = document.createElement("canvas");
    barcodeCanvas.width = 300;
    barcodeCanvas.height = 100;
    let barcodeCtx = barcodeCanvas.getContext("2d");
    liblogo.src = "/Library User Creation/res/liblogotransparent.png";
    camnorte.src = "/Library User Creation/res/camnortelogo.png";
    profile.src = "/Library User Creation/res/profilewithbg.png";
    profile.src = cardIMG;
    Promise.all([liblogo, camnorte, profile].map(image => new Promise((resolve, reject) => {
        image.onload = resolve;
        image.onerror = reject;
    })))
    .then(() => {
        ctx.drawImage(liblogo, 150, 25, 130, 130);
        ctx.drawImage(camnorte, 40, 40, 100, 100);
        ctx.drawImage(profile, 50, 245, 300, 300);
        JsBarcode(barcodeCanvas, userId, {
                format: "CODE39",
                width: 2,
                height: 80,
                displayValue: false
            });

            // Overlay the barcode canvas onto the main canvas
            ctx.drawImage(barcodeCanvas, 480, 500, 300, 100);
    })
    .catch(error => console.error("Error loading images:", error));