Matt Matt - 29 days ago 13
HTML Question

Draw images on in the middle of a canvas

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 to middle of my image to be in the middle of my canvas, not the topcorner of thhe image.

Sorry for that

Edit: typo

Answer

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

Comments