Draw images on in the middle of a canvas

Question

I'm making a photogallery, but all my images are painted in the origin (0,0).

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

How can I make sure that my images are drawn in the middle on the canvas object?

Thanks for helping me out!

UPDATE

I might have formed my question a bit wrong. What I mean is: I want the middle of my image to be in the middle of my canvas, not the top corner of the image.

Sorry for that

Edit: typo

Edit2: typo

Answer 1

If you supply the x, y position like so:

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

then it should appear in the center. An example of this in action is available at: http://jsfiddle.net/VPLZc/2/.

Answer 2

If you want to draw it dead on into the centre, you need to know the image width and height. It becomes easy afterwards:

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