JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="https://raw.github.com/caolan/async/master/lib/async.js"></script>

CSS

.boldIt {
    font-weight : bold;
    font-style : italic;
}

JavaScript

function compare(arr, fn) {
	// create test div
    var testdiv = document.createElement("div");
    testdiv.style.marginTop = '1000px';
    document.body.appendChild(testdiv);
	async.map(
		arr,
		function (data, callback) {
			var htStr = data.one, htStr2 = data.two;
			// create elements from strings
			var el = document.createElement("div"), el2 = document.createElement("div");
			el.innerHTML = htStr;
			testdiv.appendChild(el);
			el2.innerHTML = htStr2;
			testdiv.appendChild(el2);
			// convert to canvas and base64 strings
			async.parallel([
				function(callback) {
					html2canvas(el, {
						onrendered: function(canvas) {
							callback(null, canvas.toDataURL());
						}
					});
				},
				function(callback) {
					html2canvas(el2, {
						onrendered: function(canvas) {
							callback(null, canvas.toDataURL());
						}
					});
				}
			],
			// start comparison
			function(err, results){
				if(results[0] === results[1]) {
					callback(null, true);
				} else {
					callback(null, false);
				}
			});
		},
		// callback function
		function (err, results) {
			document.body.removeChild(testdiv);
			if (typeof fn === 'function') {
				fn(results);
			}
		}
	);
}
// elements to be tested
var arr = [];
arr.push({
    one: '<div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>',
    two: '<div id="target2"> Some<sup>en</sup> <span class="boldIt">text</span></div>'
});
arr.push({
    one: '<div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>',
    two: '<div id="target3"> Someen text</div>'
});
// let the test begin
compare(arr, function (result) {
    console.log(result);
});