JSFiddle - React, Tailwind, and code Playground

HTML

<h2>SVG to canvas:</h2>
<canvas width=""></canvas>

<h2>Canvas to png:</h2>
<img id="png" />

JavaScript

var canvas = document.querySelector('canvas'),
	ctx = canvas.getContext('2d');

var svg = 
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" >
    <defs>
        <!--http://stackoverflow.com/questions/35434315/how-to-get-crispedges-for-svg-text-->
        <filter id="crispify">
            <feComponentTransfer>
	            <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
    <style>
    	svg * {
        	filter: url('#crispify');
        }
    </style>

    <g>
        <ellipse cx="80" cy="40" rx="30" ry="25" fill="dodgerblue" />
        <ellipse cx="120" cy="60" rx="30" ry="25" fill="tomato" />
		<text x="10" y="50" font-size="36" >Hello World</text>
    </g>
</svg>`;

//Resizing is possible when the <svg> has a viewBox and *no* width/height:
var render_width = 400,
	render_height = 200;

var img = new Image();
img.width = render_width;
img.height = render_height;

img.src = 'data:image/svg+xml;base64,' + btoa(svg);
img.onload = function() {
	canvas.width = render_width;
	canvas.height = render_height;
    
    ctx.drawImage(img, 0, 0);
    
    static_image = canvas.toDataURL('image/png');
    document.querySelector('#png').src = static_image;
};