キャンバスのdrawImageのスケールが一貫していないのはなぜですか？

Question

イメージをキャンバスにレンダリングしています。 drawImage MDN APIを読んだ後、それは同じ結果を生成する必要があり、次の2行のコードのようになります。

var ctx = canvas.getContext('2d'); 
ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.clip.width, this.clip.height); 
ctx.drawImage(this.image,           0, 0, this.clip.width, this.clip.height); 

しかし、彼らはしないでください！なぜ私は理解できません。最初の画像は、私が期待している画像であるthis.clipで埋め尽くされています。しかし、第2のものは、this.clipであるものに拡大するようには見えず、画像はそれ自身の範囲外に出ているようです。

これは私がjavascriptで生成した画像ですので、これが起こるような画像の作成に失敗した可能性はありますか？

これは私が画像を作るために使うコードです。

this.image = new Image(this.getSize()[0],this.getSize()[1]); 
//this.getSize() = [32, 42, 40]; 
var c = document.createElement('canvas'); 
var ctx = c.getContext('2d'); 
var pixels = ctx.createImageData(this.image.width, this.image.height); 
for (var x = 0; x < this.image.width; x++) { 
    for (var y = 0; y < this.image.height; y++) { 
     var i = (x + y*this.image.width)*4; 
     var color = scalarToHue(this.sample(x,y,layer),0,10,50); 
     pixels.data[i] = Math.round(color[0]*255); 
     pixels.data[i + 1] = Math.round(color[1]*255); 
     pixels.data[i + 2] = Math.round(color[2]*255); 
     pixels.data[i + 3] = 255; 
    } 
} 
ctx.putImageData(pixels, 0, 0); 
this.image.src = c.toDataURL("image.png"); 

また、私はクロムを使用しています。

Answer 1

これはimageの幅と高さのプロパティをImage(width, height)コンストラクタでハードコーディングしているためです。

ctx.drawImage(img, dx, dy [, dwidth ,dheight])は、あなたのイメージのnaturalWidthとnaturalHeightに、ではない彼らのwidthとheightものにswidthとsheightデフォルトを行います。

あなたのコードでは、最初の行は幅と高さの値として32と42を使用し、2行目はコードを正しく読み込むと300と150を使用します。

Ps：コードを再読して、キャンバスの幅と高さを描画する前にキャンバスの幅と高さをこれらの値に設定するだけだと思われる場合は、drawImage(x, y)バージョンが必要です。