JSFiddle - React, Tailwind, and code Playground

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);
    
    
    var credit = '<svg xmlns="http://www.w3.org/2000/svg" width="230" height="30">' +  '<foreignObject width="100%" height="100%">' +'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:9px"><strong>Created with mapchart.net &#169; </strong></div>' + '</foreignObject>' +   '</svg>';
    
     var img3 = new Image();
    var svg3 = new Blob([credit],{type: 'image/svg+xml;charset=utf-8'});
    var url3 = DOMURL.createObjectURL(svg3);
    img1.src = url1;
    img3.src = url3;
    img1.onload = function() {
        ctx.fillStyle='red';
        ctx.fillRect(0,0,canvas1.width,canvas1.height);
        ctx.drawImage(img3, 0, 0);
       ctx.drawImage(img1, 0, 0);
        
    };    
});