Rysuj obrazy na środku płótna

Question

Robię galerię zdjęć, ale wszystkie moje obrazy są malowane w miejscu pochodzenia (0,0).

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

Jak mogę się upewnić, że moje obrazy są rysowane pośrodku na obiekcie płótna?

Dzięki za pomoc!

UPDATE

mógłbym tworzą moje pytanie trochę źle. Mam na myśli: chcę, aby środek mojego obrazu znajdował się pośrodku mojego płótna, a nie w górnym rogu obrazu.

Niestety do tej

EDIT: typo

Edit2: typo

Answer 1

Jeśli podasz położenie x, y tak:

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

to powinno pojawić się w środku. Przykład tego działania znajduje się pod adresem: http://jsfiddle.net/VPLZc/2/.

Answer 2

zrównoważyć pochodzenie (co jest zawsze 0,0 - w górę w lewo) przez + (image.width/2) i + (image.height/2) aby rozpocząć rysowanie w centrum płótna.

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

Answer 3

Jeśli chcesz go narysować na środku, musisz znać szerokość i wysokość obrazu. Potem staje się łatwe:

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