JSFiddle - React, Tailwind, and code Playground

by Vasiliy Altunin

HTML

<button type="button" class="button" id="download" > Convert to Image</button>

<div id="mapContainer" >
    <canvas id="canvas1" width="400px" height="300px"></canvas>
    <div id='rsr' ><svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> </div>
</div>

JavaScript

$('#download').click(function() {
   var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
    console.log(svgString);
			var canvas1 = document.getElementById("canvas1");
			var ctx = canvas1.getContext("2d");
			var DOMURL = self.URL || self.webkitURL || self;
			var img1 = new Image();
		//	var img1 = document.createElement("img");
			var svg1 = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
			var url1 = DOMURL.createObjectURL(svg1);
    
    
    img1.src = url1;
    img1.onload = function() {
        ctx.fillStyle='red';
        ctx.fillRect(0,0,canvas1.width,canvas1.height);
        
        ctx.font = "9pt sans-serif";
        ctx.fillStyle = 'blue';
        ctx.fillText("Created with mapchart.net ©", 20, 120);
        
       ctx.drawImage(img1, 0, 0);
        
    };    
});