は、私はこの上など、他のSO投稿やMDNのドキュメントを確認しましたが、それでも私のイメージがキャンバスに表示されない理由を把握することはできませんHTMLキャンバス

Question

に画像を描画します。私はこれに関する助けに感謝します。

HTML

<canvas id="myCanvas" style="height:500px;width:500px;border:0.5px solid #979797;"></canvas> 

はJavaScript

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 
img.src = 'http://i.imgur.com/3dItN1Y.png'; 

https://jsfiddle.net/rsL3vsju/

Answer 1

あなたはこのように、CSSでキャンバス高さと幅を設定しているので、これが起こっている：

<canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas> 

これは間違ったコードです。正しい方法は、以下のように、heightとキャンバスのwidth属性を使用している：

<canvas id="myCanvas" height="500" width="500" style="border: 0.5px solid #979797;"></canvas>