JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://foxgis.com/static/svgedit/editor/FileSaver.js"></script>
<script src="http://foxgis.com/static/svgedit/editor/canvas-toBlob.js"></script>
<canvas id="map-svg" style="border:1px solid"></canvas>
<img src="" id="image">
<button id="download">DownLoad</button>

JavaScript

var str = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="314.0625" height="200" viewBox="0 0 314.0625 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"><![CDATA[]]></style></defs><g class="transform-group"><g transform="scale(0.1953125, 0.1953125)"><path d="M843.095674 133.294719c-22.473155 14.739376-59.242082 14.739376-81.71691-0.005022L569.793655 7.577297c-22.468133-14.739376-50.657922-7.121102-62.636909 16.935635l-45.728057 91.839455c-11.985683 24.056738 0.204225 43.746067 27.084964 43.746067l631.874804 0c26.875717 0 38.683958-19.4918 26.241279-43.314181l-48.408096-92.696532c-12.444352-23.820707-41.005765-31.249821-63.480594-16.510445L843.095674 133.294719 843.095674 133.294719zM1235.461053 980.438072 1235.461053 465.704901c0-12.183212-7.912894-21.264543-20.753979-21.264543L867.899007 444.440359l0 579.554621 324.000117 0C1221.958747 1024.000002 1235.461053 998.880288 1235.461053 980.438072L1235.461053 980.438072zM416.447226 1024.000002l334.507677 0L750.954903 444.445381 391.247161 444.445381c-13.582658 0-20.742261 10.763679-20.742261 21.259521 0 10.500864-0.006696 503.336729-0.006696 514.734845C370.498204 1010.8576 395.751836 1024.000002 416.447226 1024.000002L416.447226 1024.000002zM284.576261 250.453091l0 104.146542c0 11.677671 9.031111 21.257847 20.748957 21.257847l445.629685 0 0-146.668931-445.629685 0C292.154359 229.188549 284.576261 238.643177 284.576261 250.453091L284.576261 250.453091zM1298.320601 229.188549 867.899007 229.188549l0 146.668931 432.206055 0c10.664914 0 20.742261-9.436214 20.742261-21.257847l0-104.146542C1320.847323 242.299145 1314.916419 229.188549 1298.320601 229.188549L1298.320601 229.188549zM1298.320601 229.188549" fill="#33475f"></path></g></g></svg>'
drawImage(str);
$("#download").bind("click",mapDownload);

function mapDownload(){
	var canvas =...