Generate png + transparent background from HTML Snippet

gistfile1.txt

      const style = `font-family: ${data.fontFamily ? data.fontFamily : 'sans-serif'};` +
                  // `fontSize: ${data.fontSize ? data.fontSize : '24'}px;` +
                  `font-size: 48px;` +
                  `font-color: ${data.fontColor ? data.fontColor : 'inherit;'}` +
                  `align: center;` +
                  `vertical-align: middle`

      const contentToSerialize = `<div style="${style}">${content}</div>`

      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.width = canvas.height = 64

      const tempImg = document.createElement('img')
      tempImg.addEventListener('load', (ev) => {
        ctx.drawImage(ev.target as HTMLVideoElement, 0, 0)
        const dataURL = canvas.toDataURL()
        this.contentCache[content] = dataURL;
        this.setAttribute('data-url',dataURL)
      })
      tempImg.src = 'data:image/svg+xml,' + 
           encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
              <foreignObject width="100%" height="100%">
                  <div xmlns="http://www.w3.org/1999/xhtml">
                     ${contentToSerialize}
                  </div>                           
              </foreignObject></svg>`)