Matt Matt - 1 year ago 85
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!


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 Source

If you supply the x, y position like so:

var image = arrPhoto[currentIndex];
        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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download