JSFiddle - React, Tailwind, and code Playground

by Mike MacCana

HTML

<h1>
test
</h1>
<div class="qrcodeAuth"></div>

JavaScript

import qrcode from 'https://cdn.skypack.dev/qrcode'

const getQRcodeCanvas = async () => {
    try {        
        let canvas=await qrcode.toCanvas(`my sample text`);

        //adding a log at center        
        const imgDim={width:30,height:30}; //logo dimention
        var context = canvas.getContext('2d');
        var imageObj = new Image();  
        imageObj.src = './images/logo.png';        
        imageObj.onload = function() {
          context.drawImage(imageObj, 
          canvas.width / 2 - imgDim.width / 2,
          canvas.height / 2 - imgDim.height / 2,imgDim.width,imgDim.height);
        };        
        return canvas;
    }catch (e) {
        console.log(e.message);
        return "";
    }
}

$(document).ready(function () {
    getQRcodeCanvas().then(qrCodeCanvas=>{
    	const element = document.querySelector(".qrcodeAuth")	
      console.log(`element is`, element)
      console.log(`res.outerHTML is`, qrCodeCanvas.outerHTML)
      // element.innerHTML = qrCodeCanvas.outerHTML;
      $(element).html(qrCodeCanvas);
    });
});