CODEWITHSUNDEEP
javascripthtmlcanvas
DRB
DRB

Reputation: 653

Can you clone contents of an element into canvas?

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;
}

Upvotes: 1

Views: 4958

Answers (1)

Steel.Liao
Steel.Liao

Reputation: 196

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);
    }
});

Upvotes: 3

Related Questions