缩放图像以适合画布

您在第二次调用中犯了错误，将源的大小设置为目标的大小。无论如何，我敢打赌，您希望缩放后的图像具有相同的纵横比，因此您需要计算它：

var hRatio = canvas.width / img.width    ;
var vRatio = canvas.height / img.height  ;
var ratio  = Math.min ( hRatio, vRatio );
ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);

我还假设您想使图像居中，因此代码为：

function drawImageScaled(img, ctx) {
   var canvas = ctx.canvas ;
   var hRatio = canvas.width  / img.width    ;
   var vRatio =  canvas.height / img.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - img.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - img.height*ratio ) / 2;  
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(img, 0,0, img.width, img.height,
                      centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);  
}

您可以在此处的 jsbin 中看到它：http://jsbin.com/funewofu/1/edit?js,output

提供源图像 (img) 大小作为第一个矩形：

ctx.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle

第二个矩形将是目标大小（将缩放到什么源矩形）。

2016/6 更新：有关纵横比和定位（ala CSS 的“覆盖”方法），请查看：
Simulation background-size: cover in canvas

我猜你希望图像被缩放到更小的尺寸，而不会丢失尺寸的比例。我有一个解决方案。

var ratio = image.naturalWidth / image.naturalHeight;
var width = canvas.width;
var height = width / ratio;
ctx.drawImage(image, 0, 0, width, height);

该比例将保持不变。在画布上绘制的图像将具有相同的比例。如果图像的高度很长，您可以使用 if 循环，您可以将 canvas.width 替换为其他宽度

您可以在调用 ctx.drawImage 之前调用 ctx.scale()：

var factor  = Math.min ( canvas.width / img.width, canvas.height / img.height );
ctx.scale(factor, factor);
ctx.drawImage(img, 0, 0);
ctx.scale(1 / factor, 1 / factor);

这应该保持纵横比。