canvas drawImage of a div

Question

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

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

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

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/

edited May 23 '17 at 12:04

Community

1
1

answered Jul 18 '12 at 18:50

Alex W

37,233
13
109
109

score 0 · Answer 2 · edited Feb 11 '14 at 15:50

0

write id=puzzle inside img tag

edited Feb 11 '14 at 15:50

MathieuF

3,130
5
31
34

answered Feb 11 '14 at 15:34

user3297878

1

2

That would make two elements with the `id` of `puzzle`. [`id`s are restricted to one element](http://programmers.stackexchange.com/a/127180). – Sam Feb 11 '14 at 15:52

canvas drawImage of a div

2 Answers2