Draw images on in the middle of a canvas

canvas, html, image, javascript

Solution

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

Problem

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

Original source