キャンバスに画像を描画しようとしています。私のソースは、テキストと画像のコレクションを持つ div です。これは可能ですか？いくつかのコードをまとめようとしましたが、キャンバスが空であるため失敗しました。
分割
<div id="puzzle">
Some text
<img src="sky" />
text text
<img src="sun.png />
</div>
コード
<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);
}