JSFiddle - React, Tailwind, and code Playground

by vickaita

HTML

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <canvas id="canvas" width="200" height="200"></canvas>   
    </body>
</html>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var data = [];
data.push('data:image/svg+xml,');
data.push('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">');
data.push(  '<defs>');
data.push(    '<filter id="f1" x="-0.1" y="-0.1" width="200" height="100">');
data.push(      '<feGaussianBlur in="SourceGraphic" stdDeviation="3" width="100" height="100"/>');
data.push(    '</filter>');
data.push(  '</defs>');
data.push(  '<g filter="url(#f1)" width="200" height="200">');
data.push(    '<foreignObject width="100" height="100">');
//data.push(    '<foreignObject width="100" height="100" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">');
//data.push(      '<body xmlns="http://www.w3.org/1999/xhtml">');
data.push(        '<p>Here is a paragraph that requires word wrap</p>');
//data.push(      '</body>');
data.push(    '</foreignObject>');
data.push(  '</g>');
data.push('</svg>');

var img = new Image();
img.src = data.join('');

img.onload = function() {
    ctx.drawImage(img, 0, 0);
}