JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="http://gabelerner.github.io/canvg/StackBlur.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://gabelerner.github.io/canvg/canvg.js"></script>
<script src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<div>
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="420" id="svg"><image height="420" width="800" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/76/Tabby_cat-hello.jpg" transform="matrix(1 0 0 1 0 0)" class="draggable" type="staticimg" id="1465449556528" ></image> </svg>
    <a id="imgId" download="Canvas.png" href="#" crossOrigin="Anonymous">Save</a>
</div>
<canvas id="canvas2" width="730px" height="300px"></canvas>

JavaScript

var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg),
    blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
    url = window.URL.createObjectURL(blob);

canvg('canvas2', svg_xml);
var a = document.getElementById('imgId');

function dlCanvas() {
    var dt = canvas2.toDataURL('image/png');
    this.href = dt;
};
a.addEventListener('click', dlCanvas, false);