JSFiddle - React, Tailwind, and code Playground

by Paul Nawat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"></script>
<div id="svg-source" ref="svg-test">
  <svg width="400" height="180" style="width:400px; height:180px">
                <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
                      style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
            </svg>
</div>

<div id="destination">
  <h4>
    Destination
  </h4>
</div>

JavaScript

var source = document.getElementById('svg-source');
var destination = document.getElementById('svg-source');

html2canvas(source).then(function(canvas) {
  destination.appendChild(canvas);
});