JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" id="source">
  <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />
</svg>

<canvas height="462px" width="467px" id="tgt"></canvas>

JavaScript

window.onload = function() {
        paintSvgToCanvas(document.getElementById('source'), document.getElementById('tgt'));
    }



    function paintSvgToCanvas(uSvg, uCanvas) {

        var pbx = document.createElement('img');

        pbx.style.width  = uSvg.style.width;
        pbx.style.height = uSvg.style.height;

        pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
        uCanvas.getContext('2d').drawImage(pbx, 0, 0);

    }