JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<div id="container" contenteditable="true" >asdfsadfasdfasdf</div>

JavaScript

//var event = new Event('finish');
//event.initEvent("finish", true, true);

var event = document.createEvent('Event');
event.initEvent('finish', true, true);


var canvas = document.getElementById('canvas');
canvas.addEventListener('click', focus, false);
var cont = document.getElementById('container');
var ctx = canvas.getContext('2d');

cont.addEventListener('finish', finFocus, false);

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 data1 = '<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> dont like' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
img.crossOrigin='';
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    console.log('0');
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}
img.src = "data:image/svg+xml," + data;

function focus() {
    //var img = new Image();
    //img.crossOrigin='';
    //var svg1 = new Blob([data1], {type: 'image/svg+xml;charset=utf-8'});
    //var url = DOMURL.createObjectURL(svg1);

    //console.log(svg1);
    //img.onload = function () {
    //  ctx.drawImage(img, 0, 0);
    //  DOMURL.revokeObjectURL(url);
    //    cont.innerHTML = 'ttttttttttt';
    //   ...