htmlキャンバス描画イメージが動作しない

Question

私はW3スクールのチュートリアルに従い、キャンバス要素内でイメージをコピーする作業をしないコードを書くことになった。キャンバスは...

<img id="image" src="assets/images/bw.jpg" width="200" height="276" alt="" /> 
<canvas id="canvas" width="220" height="286"></canvas> 

空白であるとJavascriptは次のとおりです。

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
var img = document.getElementById("image"); 
ctx.drawImage(img,0,0); 

をこの単純な例が動作しないのはなぜ？

Answer 1

width, heightを .drawImage()で呼び出してみてください。それは

実際のソリューションは、のように辛抱強く@Kaiidoによって指摘、あなたが画像を待つ必要が<img>要素

<img id="image" onload="draw()" src="http://lorempixel.com/50/50" width="200" height="276" alt="" /> 
<canvas id="canvas" width="220" height="286"></canvas> 
<script> 
    function draw() { 
    var c=document.getElementById("canvas"); 
    var ctx=c.getContext("2d"); 
    var img = document.getElementById("image"); 
    ctx.drawImage(img,0,0); 
    } 
</script> 

またはHTMLImageElement.addEventListener("load", handler)