JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can1"></canvas>
<canvas id="can2"></canvas>

JavaScript

function createImage(html, can) {
     var canvas = $("#" + can);
     var ctx = canvas[0].getContext("2d");
     var data = "<svg xmlns='' width='1000' height='1000'>" +
         "<foreignObject width='100%' height='100%'>" +
         "<div xmlns=''>" + html +
         "</div>" +
         "</foreignObject>" +
         "</svg>";
     var DOMURL = self.URL || self.webkitURL || self;
     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 () {
         ctx.drawImage(img, 0, 0);
         DOMURL.revokeObjectURL(url);
     };
     img.src = url;
     //return img.src;
     return canvas[0];
 }
 var a1 = createImage("<span style='font-size:34px'><i><b>Hello</b></i></span>", "can1");
 var a2 = createImage("<span style='font-size:34px'><i><b>Hello</b></i></span>", "can2");
 setTimeout(function () {
     var ctx1 = a1.getContext('2d');
     var imageData = ctx1.getImageData(0, 0, a1.width, a1.height);
     var pixels = imageData.data;
     var ctx2 = a2.getContext('2d');
     var imageData2 = ctx2.getImageData(0, 0, a2.width, a2.height);
     var pixels2 = imageData2.data,
         count;
     for (var i = 0, il = pixels.length; i < il; i++) {
         if (pixels[i] == pixels2[i]) {
             count++;
         }
     }
     if (count === pixels.length && count === pixels2.length) {
         alert("Match");
     }
 }, 50);