I have a function that draws a canvas then draws another canvas inside for a barcode. It seems to be overwriting it.
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);
The data comes from firebase, even the userId that the barcode uses.
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();
It seems to load the canvas first, before being overwritten. I tried making a new canvas inside but it didn’t show so I did this one.
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));
}
}
