холст фонового изображения растягивается

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

Если вы хотите, чтобы ваше изображение, чтобы соответствовать с в Canvas-

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

где х и у является верхнее левое положение, где вы хотите, чтобы вывести свой логотип. imgWidth и imgHeight - это ширина и высота вашего логотипа соответственно.

см это изображение. http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/