My QR doesn't seem to render, but the red borders I put does

I am using canvas to draw a qr using a generated user ID, i put a red border around and it shows, but not the qr itself.

Here's my other drawing, this ones shows, but the qr does not. I included this in case I overlooked something.

if (canvasBack.getContext) {
const ctx2 = canvasBack.getContext("2d");
ctx2.fillStyle = "#FFFFFF"; // white background color
// Fill the entire canvas with the background color
ctx2.fillRect(0, 0, canvasBack.width, canvasBack.height);
ctx2.font = "18px Arial";
ctx2.fillStyle = "black";
ctx2.fillText("1. This Library Card is non-transferable.",40,60);
ctx2.fillText("2. Library users are required to present their library",40,90);
ctx2.fillText("   card every time they use the library collections.",40,120);
ctx2.fillText("3. The loss of this ID card must be reported immediately.",40,150);
ctx2.fillText("   A replacement ID comes with a fee.",40,180);
ctx2.fillText("4. ID will be confiscated/cancelled for any false",40,210);
ctx2.fillText("   information given.",40,240);
ctx2.fillText("Person to be notified in case of emergency:",40,270);
ctx2.font = "bold 21px Arial";
ctx2.fillText("NAME:",55,320);
ctx2.fillText("ADDRESS:",55,360);
ctx2.fillText("CONTACT NO.:",55,400);
ctx2.fillText(users.contactName,250,320);
ctx2.fillText(users.contactAddress,250,360);
ctx2.fillText(users.contactNum,250,400);    
ctx2.font = "bold 25px Arial";
ctx2.fillText("SIGNATURE",160,520);
ctx2.fillText("ABEL C. ICATLO",620,490);
ctx2.font = "italic 18px Arial";
ctx2.fillText("MUSEUM CURATOR I/OIC-LSD",590,520);
//blue
ctx2.beginPath();
ctx2.moveTo(1000, 1000);
ctx2.lineTo(0, 600);
ctx2.lineTo(0, 540);
ctx2.lineTo(500, 540);
ctx2.lineTo(650, 420);
ctx2.lineTo(970, 420);
ctx2.lineTo(1000, 400);
ctx2.lineTo(1000, 1000);
ctx2.stroke();
ctx2.fillStyle = "#002D624C";
    ctx2.fill();
//yellow left bottom
ctx2.beginPath();
ctx2.moveTo(0, 540);
ctx2.lineTo(0, 520);
ctx2.lineTo(500, 520);
ctx2.lineTo(470, 540);
ctx2.lineTo(0, 540);
ctx2.stroke();
ctx2.fillStyle = "#FFFD374C";
ctx2.fill();
//yellow right bottom
ctx2.beginPath();
ctx2.moveTo(1000, 400);
ctx2.lineTo(700, 400);
ctx2.lineTo(670, 420);
ctx2.lineTo(970, 420);
ctx2.lineTo(1000, 400);
ctx2.stroke();
ctx2.fillStyle = "#FFFD374C";
    ctx2.fill();

Here's where I generate the qr using id, it doesn't have any errors.

let qrCanvas = document.createElement("canvas");
    qrCanvas.width = 100;
    qrCanvas.height = 100;
    let qrcode = new QRCode(qrCanvas, {
    text: userId,
    width: 100,
    height: 100,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});
ctx2.drawImage(qrCanvas, 300, 80, 100, 100);

This is the script I use, in case it helps

<head>
    <title>View Users</title>
<link rel="stylesheet" href="/Library User Creation/css/viewUsers.css">
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
</head>

And this is my canvas, it's the second one that should contain the qr.

<div id="cardModal" class="modal">
    <div class="modal-content">
        <span class="closecard">&times;</span>
    <canvas id="sampleID" height="600" width="1000">
                    
    </canvas>
    <canvas id="sampleIDback" height="600" width="1000">
                
    </canvas>
    <button id="btnSendCard">Send Card</button>
    <button id="btnPrintCard">Print Card</button>
</div>
</div>

Solution

Nevermind I solved it, I just used this:

let qrElement = document.createElement("div");
    let qrcode = new QRCode(qrElement, {
    text: userId,
    width: 320,
    height: 320,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

let qrImage = new Image();
qrImage.src = qrElement.firstChild.toDataURL(); // Convert SVG to data URL

qrImage.onload = function() {
    ctx2.drawImage(qrImage, 610, 50, 320, 320);
};