CODEWITHSUNDEEP
javascriptcanvas
Sir
Sir

Reputation: 8277

What is the reference point of `drawImage()` in canvas?

This is a question about the drawImage() function.

    var x = (i-j)*(img[0].height/2) + (ctx.canvas.width/2)-(img[0].width/2); 
    var y = (i+j)*(img[0].height/4);
    abposx = x + offset_x;
    abposy = y + offset_y;
    ctx.drawImage(img[0], abposx, abposy);

This code draws an image with its offset in a canvas. One thing I wanted to know was the "drawImage" ... does it place it by the left corner of the image to the position or its middle?

If it does use the left corner how can I change it so it places it based on the center of the image?

Upvotes: 0

Views: 711

Answers (1)

Ian Bishop
Ian Bishop

Reputation: 5205

The canvas coordinate system starts at (0,0) in the top-left corner (source).

So yes, drawImage will draw starting at the upper left corner.

You can draw using the center of the image by simply offsetting it by width/2 and height/2.

So if you have some central point p,

drawImage(image, p.x - image.width/2, p.y - image.height/2)

is equivalent to drawing from the upper left hand corner.

Upvotes: 1

Related Questions