JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect x=10 y=10 width=100 height=100 /><foreignObject id='foreign' width='50%' height='50%'><div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'><button id='blackkbot'>blackkbot</button><input type='text' value='blackkbot'/></div></foreignObject></svg>

<canvas id='c'></canvas>

JavaScript

var canvas = document.getElementById('c'),
    ctx = canvas.getContext('2d');
var blackkbot = document.getElementById('blackkbot');
console.dir(document.getElementById('foreign'));
console.dir(blackkbot);
var img = new Image();
console.dir(document.getElementsByTagName('svg')[0].outerHTML);
var data   = document.getElementsByTagName('svg')[0].outerHTML.replace(/["]/gmi,"'");
console.log(data);
var DOMURL = window.URL || window.webkitURL || window;
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;