画布背景图像越来越拉伸

Question

我希望这张图片在我的画布上，但是它会被拉伸而不适合盒子。我错过了什么？

这是我的代码：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");


var img = new Image();
img.src = "my image url";

img.onload = function(){
    ctx.drawImage(img,0,0);   
}

请检查此图片：http://i.stack.imgur.com/RMZM2.png

我想要的是我的徽标适合画布盒。

以下是我的整个徽标：http://i.stack.imgur.com/4jFjM.png

Answer 1

如果您希望图片适合画布 -

ctx.drawImage(img,0,0,imgWidth,imgHeight,x,y, canvas.width, canvas.height);

其中x和y是您要显示徽标的左上角位置。 imgWidth和imgHeight分别是徽标的宽度和高度。

参考此图片。 http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/