JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<body>
    <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
</body>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
    "<foreignObject width='100%' height='100%'>" +
    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
    "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
    "</div>" +
    "</foreignObject>" +
    "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {
    type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
document.body.appendChild(img);