JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
</head>
<body>
<div>SVG</div>
<div id="svg-container">
<svg height="100" width="100"><style>
@font-face {
    font-family: "Acme";
    src:...

JavaScript

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var png = canvas.toDataURL("image/png");
    document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
    DOMURL.revokeObjectURL(png);
};
img.src = url;

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.font         = '24px Acme';
ctx2.fillStyle = 'purple';
ctx2.textBaseline = 'top';
ctx2.fillText  ('text2', 0, 0);



var png2 = canvas2.toDataURL("image/png");
document.querySelector('#png-container2').innerHTML = '<img src="'+png2+'"/>';