javascript - Why does canvas's drawImage scale inconsistently? -

i'm rendering image canvas. after reading drawimage mdn api, looks following 2 lines of code should produce same result:

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); 

but don't! , can't figure out why. first 1 scales image fill this.clip, expect. second doesn't seem scale mater this.clip is, , image seems go outside of own bounds.

now, image generated in javascript, there way have screwed image creation such happen?

if helps. below code use make image.

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); (var x = 0; x < this.image.width; x++) {      (var y = 0; y < this.image.height; y++) {          var = (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"); 

also, i'm using chrome.

this because hard-coding image's width , height properties setting in image(width, height) constructor.

ctx.drawimage(img, dx, dy [, dwidth ,dheight]) make swidth , sheight default image's naturalwidth , naturalheight, not width , height ones.

so in code, means first line use 32 , 42 values swidth , sheight, while second line use 300 , 150 if read code correctly.

ps: re-reading code, seems want set canvas's width , height these values before drawing on it, you'll need drawimage(x, y) version.