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

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

• javascript
• html
• html5-canvas

• @Alex W this is being used in a chrome extension so i am using javascript files – Daniel Commented Jul 18, 2012 at 18:51
• img = document.getElementById("puzzle"); "puzzle" is a <div> element, not image. I think this'll help you: developer.mozilla/en/Canvas_tutorial/Using_images – RobertO Commented Jul 18, 2012 at 18:51

2 Answers 2

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./

write id=puzzle inside img tag