将图像绘制到HTML画布

Question

I've reviewed the other SO posts and MDN docs, etc on this but still can't figure out why my image is not appearing in the canvas. I appreciate any help on this.

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

This is happening because you are setting the canvas' height and width with CSS, like this:

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

That is the wrong code. The correct way is using the height and the width attributes of the canvas, as below:

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