Disegna le immagini su una tela

Question

Sto facendo una fotogallery, ma tutte le mie immagini sono dipinte nell'origine (0,0).

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

Come posso essere sicuro che le mie immagini vengano disegnate al centro sull'oggetto canvas?

Grazie per avermi aiutato!

UPDATE

avrei potuto formata la mia domanda un po 'sbagliato. Quello che voglio dire è: voglio che metà dell'immagine sia nel mezzo della mia tela, non l'angolo superiore dell'immagine.

dispiace per quella

Edit: errore di battitura

Edit2: errore di battitura

Answer 1

Se si fornisce la posizione x, y in questo modo:

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

allora dovrebbe apparire al centro. Un esempio di questo in azione è disponibile a: http://jsfiddle.net/VPLZc/2/.

Answer 2

Offset l'origine (che è sempre 0,0 - in alto a sinistra) per + (image.width/2) e + (image.height/2) per iniziare a disegnare nel centro della tela.

Answer 3

Se si desidera disegnarlo perfettamente al centro, è necessario conoscere la larghezza e l'altezza dell'immagine. Diventa facile dopo:

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