compare html elements with canvas

by Gustavo Carvalho

HTML

<script src="http://html2canvas.hertzen.com/build/html2canvas.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

var results = {};
html2canvas(document.getElementById("target1-container"), {
  onrendered: function(canvas) {
	  results["target1"] = canvas.toDataURL();
	  
  }
});
html2canvas(document.getElementById("target2-container"), {
  onrendered: function(canvas) {
	results["target2"] = canvas.toDataURL();
  }
});
html2canvas(document.getElementById("target3-container"), {
  onrendered: function(canvas) {
	results["target3"] = canvas.toDataURL();
	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;
  }
});