Mi secuencia de comandos js tiene una condición, por lo que si queda un jugador, la pantalla se hace de tamaño completo y el nombre está en una fuente grande. También quiero agregar el efecto de confeti que encontré en codepen.io. Este efecto 'arroja' confeti sobre el texto en la pantalla, pero el efecto se llama desde una página html usando <canvas id="confetti"></canvas> .

¿Cómo cambio esto para poder llamarlo desde la siguiente sección en mi script, de modo que el nombre en la pantalla aún sea visible? (el código está disponible en 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); }

Gracias