Question

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?

Answer 1

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.