JSFiddle - React, Tailwind, and code Playground

by Leonid Artemev

HTML

<svg xmlns="http://www.w3.org/2000/svg" id='svg' width="200" height="200">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:24px">123</div>
    </foreignObject>
</svg>
<canvas id='canvas' width='300' height='300'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
canvasContext.rect(20,20,150,100);
canvasContext.fillStyle="red";
canvasContext.fill();

var svg = document.getElementById('svg');
console.log('begin');

var blob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
var image = new Image();
var DOMURL = window.URL || window.webkitURL || window;
var url = DOMURL.createObjectURL(blob);
image.src = url;
console.log(url);
//image.crossOrigin = 'Anonymous';
//image.src = "data:image/svg+xml," + encodeURIComponent(svg.outerHTML);


document.body.appendChild(image);

image.onload = function () {
    canvasContext.drawImage(image, 0, 0);
}

console.log('end');