JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" />
  <text x="0" y="100">Look, i'm cool</text>
</svg>
<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" />
  <text x="0" y="100">Look, i'm cool</text>
</svg>

<canvas id="canvas"></canvas>
<div id = "cont"></div>

JavaScript

var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 100, 100);
//    DOMURL.revokeObjectURL(url);
  };
document.getElementById("cont").innerHTML += url;  
img.src = url;