HTML5：画布和图像大小

Question

我想使用JS在画布上绘制图像。 这是我的HTML代码：

<canvas style="width:1000px;height:600px;border:1px solid black;" id="canvas"> </canvas>

这是我的js代码：

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img, 0, 0,1000,600)
    }
    img.src = someUrlToJpgImage;

这是位于服务器上的原始jpg图像（1000x600）：

这是我在浏览器中看到的结果（1000x600）：

如您所见，这是按比例缩放图像的左上角，而不是按预期缩放整个图像。我试着添加到js代码：

ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

但它没有帮助。

如何解决这个问题？

Answer 1

您应该在canvas元素上设置所需的像素数量：

<canvas style="width:1000px;height:600px;border:1px solid black;" height="600" width="1000" id="canvas"> </canvas>