Canvasに描画するときはonloadハンドラにて実行する
NG
1 2 3 4 5 6 7 |
var ctx = document.getElementById('myCanvas').getContext("2d") var img = new Image() img.src = "myDog.png" ctx.drawImage(img, 0, 0) |
※上手くいくときもある。
OK
1 2 3 4 5 6 7 8 9 |
var ctx = document.getElementById('myCanvas').getContext("2d") var img = new Image() img.src = "myDog.png" img.onload = function() { ctx.drawImage(img, 0, 0) } |
ローカル画像に限らない。
canvas.toDataURL()で画像を生成したときも同様。