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>