JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<p>
<button id="red-sq" title="Click to clone me as img">
  CLICK TO CLONE
</button>
</p>
<p>
  <button id="clean-up">
    Clean up
  </button>
</p>
<div id="show-img">
</div>

CSS

button#red-sq {
  color: yellow;
  width: 200px;
  font-size:20px;
  font-weight: bold;
  /* data:image/png;base64 throw insecure error in ios safari */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
}

div#show-img {
  border: 1px dashed;
  height: 200px;
  width: 200px;
  padding: 1em;
  margin-left: 2em;
  text-align: center;
  vertical-align: middle;
}

JavaScript

document.getElementById('red-sq').addEventListener('click',
  function(ev) {
    html2canvas(document.getElementById('red-sq'), {
      onrendered: function(canvas) {
        var ctx = canvas;
        try {
          var dataURL = ctx.toDataURL('image/jpeg', 1.0)
          document.getElementById('show-img').innerHTML = "<img src='" + dataURL + "'/>";
        } catch (e) {
          document.getElementById('show-img').innerHTML =
          "Error calling toDataURL(): " + e
        }

      }
    })
  });

document.getElementById("clean-up").addEventListener(
  'click',
  function(ev) {
    document.getElementById('show-img').innerHTML = "";
  }
);