My js script has a condition in it, whereby if there is one player left, the screen is made full size and the name is in a huge font. I also want to add the confetti effect I have found on codepen.io. This effect 'drops' confetti over the text on the screen but the effect is called from an html page using <canvas id="confetti"></canvas>.

How do I change this so that I can call it form the following section in my script, such that the name on the screen is still visible? (code is available at Confetti) `

if(heatDriverData.d.length == 1){
    window.resizeTo(1920,1080);
    name = heatDriverData.d[0].nn;
    championship = trackData.n;

    // Create a new table for each group
    //var t=document.createElement('table');
    t.style.width = document.body.clientWidth-1+'px';
    t.style.borderCollapse = 'collapse';
    t.style.cellPadding = '5px';


    var th = document.createElement( "th" );
    th.style.color = headerColour;
    th.style.fontSize = "40pt";
    th.style.border= theBorderWidth + borderColour;
    th.appendChild(document.createTextNode(championship));
    t.appendChild(th);

    
    
    // Create a table record for the winning driver
    
            
    var tr=document.createElement('tr');                                        //create variable 'tr' to create a table row
    tr.style.backgroundColor = "transparent";
    tr.style.color = textColour;    
    
        
    var tdName=document.createElement('td');                                    //create variable 'tdName' to create a table cell with data
    tdName.style.textAlign='center';
    tdName.style.fontSize = "120pt";

    tdName.style.color = "red";
    tdName.style.border=theBorderWidth + borderColour;
    tdName.appendChild(document.createTextNode(name));
    tr.appendChild(tdName);
    t.appendChild(tr);
    
    // Create the table objects in the liverace div
    if (liverace.firstChild){
    liverace.removeChild(liverace.firstChild);
    }
    liverace.appendChild(t);
        
}

Thanks