HTMl Canvas with broadcasting

Question

I have done a canvas where from the HTML content i want to display the data related to video or normal text data to render in my HTML canvas with each time as Canvas is a static page. Just like normal html page data changes with each event, I want to change my canvas data aslo. Here is the code which render the participant video through janus in tml body. I want basically to render my data dynamically updated in my canvas with each event.

function initiateParScreens(){
    console.log("--->screenUtils-> initiateParScreens")
    console.log("--->Participant list is created");
    var pall = allInEvent.participant; 
    document.getElementById("parlistview").innerHTML = "";
    //video poster=""
    for(let i=0; i<pall.length; i++){
        if(ptype == 2 && myusername === pall[i].email){
            //par self 
        } else {
            if(pall[i].state != null){
                if(pall[i].state.state !== "terminated"){
                    var vidWindow = '<div class="bg-custom text-center mb-2" id="remote' + pall[i].id + '"  style=" margin: 10px;">'+
                                    '<video id="v' + pall[i].id + '" src="../public/video/loading_circle_dots.mp4" width="160" height="90" style="object-fit: cover;" autoplay loop disablePictureInPicture ></video>'+
                                    '<p class="card-title pt-0 mt-0" style="text-align: center;" ><b id="vnm'+pall[i].id+'">' + getPname(pall[i].email,2) + '</b></p>'+
                                    '</div>';
                    $("#parlistview").append(vidWindow);
                }    
            } else {
                var vidWindow = '<div class="bg-custom text-center mb-2" id="remote' + pall[i].id + '" style=" margin: 10px;">'+
                '<video id="v' + pall[i].id + '" src="../public/video/loading_circle_dots.mp4" width="160" height="90" style="object-fit: cover;" autoplay loop disablePictureInPicture ></video>'+
                '<p class="card-title pt-0 mt-0"  style="text-align: center;"><b id="vnm'+pall[i].id+'">' + getPname(pall[i].email,2) + '</b></p>'+
                '</div>';
                $("#parlistview").append(vidWindow);    
            }
            
        }
    }
}

and here is my canvas where i want the video of participant:

  <canvas id="canvas1" style="background-color: rgb(241, 233, 233);" width="1500" height="800"></canvas>

 context.beginPath();
    const video1 = document.getElementById('v0');
    context.strokeStyle = '#0000FF';
    context.fillStyle = 'white';
    // createVideoBox(video1, 37 * tol, 120 * tol, 255 * tol, 320 * tol);
    video1.addEventListener("loadedmetadata", function () {
        canvas.width = video1.width;
        canvas.height = video1.height;
    });

    video1.addEventListener(
        "play",
        function () {
            var $this = this;
            (function loop() {
                if (!$this.paused && !$this.ended) {
                    context.drawImage($this, 32, 195, 255, 150);
                    setTimeout(loop, 1000 / 30);
                }
            })();
        }

    );
    context.closePath();

As the id is dynamic i dont have the idea how to implement it in my canvas

Same goes for data also i want to render some data which comming from ID's

.   var QMname = document.getElementById('qid1');
    QMname.addEventListener('mouseup', function () {
        updateCanvasQMName(QMname.textContent);
    });
    function updateCanvasQMName(data) {
        //context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        // var QuizMasterName = text.textContent;
        context.font = "18px Arial";
        context.fillStyle = "black";
        context.textAlign = "center";
        context.fillText(data, 160, 595);
        context.closePath();
    }

What to do?