Zeichnen Bilder in der Mitte einer Leinwand

Question

Ich mache eine Fotogalerie, aber alle meine Bilder sind im Ursprung (0,0) gemalt.

Wie kann ich sicherstellen, dass meine Bilder in der Mitte auf dem Leinwandobjekt gezeichnet werden?

Vielen Dank für Ihre Hilfe!

UPDATE

könnte ich meine Frage etwas falsch gebildet haben. Was ich meine ist: Ich möchte, dass die Mitte meines Bildes in der Mitte meiner Leinwand ist, nicht in der oberen Ecke des Bildes.

Sorry für diese

Edit: Tippfehler

Edit2: Typo

Answer 1

Wenn Sie die x, y Position wie so liefern:

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

dann sollte es in der Mitte erscheinen. Ein Beispiel hierfür ist verfügbar unter: http://jsfiddle.net/VPLZc/2/.

Answer 2

den Ursprung Offset (die immer 0,0 - oben links) von + (image.width/2) und + (image.height/2) beginnen in der Mitte Zeichnung der Leinwand.

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

Answer 3

Wenn Sie es direkt in die Mitte zeichnen möchten, müssen Sie die Bildbreite und -höhe kennen. Es wird einfach danach:

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