1

I was wondering if it's possible to clone an HTML element into canvas. So looking at this JSFiddle, how would you duplicate it into canvas?

I've seen ways to draw DOM objects into a canvas element, but I was curious if there was a way to do it differently.

<p>Html</p>
<div id="clone-me">
  <div id="square">
  </div>
</div>

<p>Canvas</p>
<canvas width="200" height="200"></canvas>

#clone-me {
  width: 200px;
  height: 200px;
  background: #333;
}

#square {
  width: 70px;
  height: 70px;
  background: red;
}
DRB
  • 633
  • 11
  • 24
  • No you can't and this page should be removed from MDN. That's a hack and only partially works with some elements in some browsers. html2canvas library is indeed the closest solution to this problem, but it's still in beta and some CSS won't render. An other solution is for chrome, to use the [desktopCapture API](https://developer.chrome.com/extensions/desktopCapture), fortunately only accessible to extensions. – Kaiido Mar 18 '16 at 10:14
  • 1
    Possible duplicate of [the most upvoted \[canvas\] question](http://stackoverflow.com/questions/tagged/canvas?sort=votes), aka [Using HTML5/Canvas/JavaScript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – Kaiido Mar 18 '16 at 10:15

1 Answers1

3

You can use html2canvas to do it, you can checkout the demo at this JSFiddle.

html2canvas(document.getElementById('clone-me'), {
    onrendered: function(canvas) {
        var canvas1 = document.getElementById('canvas1');
        var ctx = canvas1.getContext('2d');
        ctx.drawImage(canvas, 0, 0);
    }
});
Steel.Liao
  • 196
  • 5