JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cols-sample-area">
					 <button id="import">Export</button>
					 <a id="download">Download as image</a>
                    <div id="container">
					
					
<svg id="containerew" width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
</svg>
					</div> 	
                     <canvas id="canvas1" width="450" height="200" style="border:1px solid #d3d3d3;">	
            </div>

JavaScript

$("#import").click(function () {
            var canvas = document.getElementById('canvas1');
            var ctx = canvas.getContext('2d');
            var DOMURL = window.URL || window.webkitURL || window;
            $("#containerew").attr("xmlns", "http://www.w3.org/2000/svg");
            var data2 = document.getElementById("containerew").outerHTML;
            var data1 = $('<div>').append($("#containerew").clone()).html();
            var img = new Image();
            var svg = new Blob([data1], { type: 'image/svg+xml;charset=utf-8' });
            var url = DOMURL.createObjectURL(svg);


            img.onload = function () {
                ctx.drawImage(img, 25, 25);
                DOMURL.revokeObjectURL(url);
            }
            img.src = url;


            return true;
        });


        function downloadCanvas(link, canvasId, filename) {
            link.href = document.getElementById(canvasId).toDataURL();
            link.download = filename;
        }

        /** 
         * The event handler for the link's onclick event. We give THIS as a
         * parameter (=the link element), ID of the canvas and a filename.
        */
        document.getElementById('download').addEventListener('click', function () {
            downloadCanvas(this, 'canvas1', 'test.png');
        }, false);