JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300">
    <g>
      <rect x="13" y="14" width="500" height="200" fill="none" stroke="blue" stroke-width="5" />
      <rect x="10" y="10" width="100" height="100" fill="#ff0000" />
      <image x="5" y="5" width="300" height="100" xlink:href="http://hd1366x768.ru/_ld/31/25911963.jpg" />
    </g>
  </svg>
</div>
<canvas></canvas>

JavaScript

var html = document.querySelector("svg").parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

canvas.setAttribute('width', 1000);
canvas.setAttribute('height', 500);

var el = document.createElementNS("http://www.w3.org/2000/svg", "image");
el.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "http://www.stihi.ru/pics/2009/04/24/4656.jpg");
el.setAttributeNS(null, "x", 20);
el.setAttributeNS(null, "y", 100);
el.setAttributeNS(null, "width", 300);
el.setAttributeNS(null, "height", 100);

document.querySelector('g').appendChild(el);

var image = new Image;
image.src = imgsrc;
image.onload = function() {
    context.drawImage(image, 0, 0);      
};