Draw images on in the middle of a canvas

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);

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/.