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>
<div id="target1-container">
	<div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>
</div>
<div id="target2-container">
	<div id="target2"> Some<sup>en</sup> <span class='boldIt'>text</span></div>
</div>
<div id="target3-container">
	<div id="target3"> Someen text</div>
</div>
<div id="results"></div>

CSS

.boldIt{
   font-weight : bold;
   font-style : italic;
}
#results {
    margin-top: 10px;
    background-color: #eee;
}

JavaScript

async.parallel({
    target1: function(callback){
		html2canvas(document.getElementById("target1-container"), {
		  onrendered: function(canvas) {
			  callback(null, canvas.toDataURL());
		  }
		});
    },
    target2: function(callback){
        html2canvas(document.getElementById("target2-container"), {
		  onrendered: function(canvas) {
			  callback(null, canvas.toDataURL());
		  }
		});
    },
	target3: function(callback){
        html2canvas(document.getElementById("target3-container"), {
		  onrendered: function(canvas) {
			  callback(null, canvas.toDataURL());
		  }
		});
    }
},
function(err, results) {
	console.log(results);
	var output = '';
	if(results["target1"]===results["target2"]) {
	  output += 'target1 and target2 are the same.<br>'
	} else {
	  output += 'target1 and target2 are different.<br>'
	}
	if(results["target1"]===results["target3"]) {
	  output += 'target1 and target3 are the same.<br>'
	} else {
	  output += 'target1 and target3 are different.<br>'
	}
	if(results["target2"]===results["target3"]) {
	  output += 'target2 and target3 are the same.<br>'
	} else {
	  output += 'target2 and target3 are different.<br>'
	}
	document.getElementById("results").innerHTML = output;
});