JSFiddle - React, Tailwind, and code Playground

HTML

<pre>
    http://msdn.microsoft.com/en-us/library/hh834675(v=vs.85).aspx
    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
</pre>
<div id="inline"></div>
<canvas id="canvas" width="300" height="200"></canvas>

CSS

#inline, #canvas {
    border: 1px solid blue;
    display: inline-block;
}

JavaScript

var inline = document.getElementById('inline'),
    canvas = document.getElementById("canvas");

function drawImageToCanvas(image) {
    canvas.getContext("2d").drawImage(image, 0, 0);
}

function getImageForSvg(svgContent, successCallback) {
    var image = new window.Image(),
        url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent);

    image.onload = function() {
        successCallback(image);
    };

    image.src = url;
}

function showSvgInCanvas(svgContent) {
    getImageForSvg(
        svgContent,
        drawImageToCanvas
    );
}

function getSvgForHtml(width, height, htmlContent) {
    return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
        '<foreignObject width="100%" height="100%">' +
        '<html xmlns="http://www.w3.org/1999/xhtml"><body>' +
        '<style>body { font-size: 16px; } h1 { background-color: lightblue; }</style>' +
        htmlContent +
        '</body></html>' +
        '</foreignObject>' +
        '</svg>';
}

function showSvgInline(svgContent) {
    inline.innerHTML = svgContent;
}

showSvgInline(getSvgForHtml(canvas.width, canvas.height, "<h1>This is <em>HTML</em> displayed via SVG's &lt;foreignObject&gt; embedded as &lt;svg&gt;</h1>"));
showSvgInCanvas(getSvgForHtml(canvas.width, canvas.height, "<h1>This is <em>HTML</em> displayed via SVG's &lt;foreignObject&gt; painted to a &lt;canvas&gt;</h1>"));