CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Daniel
Daniel

Reputation: 4342

canvas drawImage of a div

I am trying to draw an image on to a canvas. My source is a div that has a collection of text and images. Is this possible to do? I have tried to put some code together but it failed as the canvas is empty.

Div

<div id="puzzle">
Some text
<img src="sky" />
text text
<img src="sun.png />
</div>

code

<canvas id="mycanvas" width="300" height="150"></canvas>
var canvas = document.getElementById("mycanvas");
var ctx = ccanvas.getContext("2d");
var img = document.getElementById("puzzle");
img.onload = function(){
    ctx.drawImage(img,0,0,40,40);
}

Upvotes: 3

Views: 10955

Answers (2)

user3297878
user3297878

Reputation: 1

write id=puzzle inside img tag

Upvotes: 0

Alex W
Alex W

Reputation: 38163

Change 

ccanvas.getContext("2d");

to

canvas.getContext("2d");

Otherwise, this seems to be what you're looking for: Can you take a "screenshot" of the page using Canvas?

More specifically: http://html2canvas.hertzen.com/

Upvotes: 3

Related Questions