Нарисуйте изображения в середине холста

Question

Я делаю фотогалерею, но все мои изображения окрашены в начало (0,0).

canvasContent.drawImage(arrPhoto[currentIndex], 0, 0); 

Как я могу убедиться, что мои изображения нарисованы посередине на холсте?

Спасибо, что помогли мне!

UPDATE

я мог бы сформировали мой вопрос немного не так. Что я хочу сказать: я хочу, чтобы середина моего изображения была в середине моего холста, а не в верхнем углу изображения.

К сожалению для этого

Edit: опечатка

edit2: опечатка

Answer 1

Если поставить x, y позицию так:

var image = arrPhoto[currentIndex]; 
canvasContent.drawImage(image, 
     canvas.width/2 - image.width/2, 
     canvas.height/2 - image.height/2 
); 

, то он должен находиться в центре. Пример этого в действии можно найти по адресу: http://jsfiddle.net/VPLZc/2/.

Answer 2

Offset происхождение (что всегда 0,0 - верхний левый) по + (image.width/2) и + (image.height/2), чтобы начать рисовать в центре холста.

drawImage(image, image.width/2, image.height/2) 

Answer 3

Если вы хотите нарисовать его мертвым в центре, вам необходимо знать ширину и высоту изображения. Становится легко потом:

//var canvas = document.getElementById("yourCanvasElementID"); 
var img = arrPhoto[currentIndex]; 
canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);