Question

I have a game where you click on a 2D HTML5 canvas to set a point for your character to move to. When I click, I’ve noticed that the character will appear to the lower right hand corner of where my mouse is clicking. So I assume that the x,y coordinate arguments of context.drawImage() are for where to start drawing the upper-left corner of the image. According to this spec, I’m right: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-images-to-the-canvas

I’ve tried to adjust this by drawing at centerX and centerY, as shown below. I seem to get the similar results as above. Huh? What should I do?

Here’s my character class draw function, which is called by a update() that runs on a timer.

this.Draw = function () {
    // var centerX = this.currentX + (this.avatarWidth/2);
    // var centerY = this.currentY + (this.avatarHeight/2);
    // console.log("hermes' supposed draw location = " + centerX + "," + centerY + " | currentX,Y = " + this.currentX + "," + this.currentY);
    // console.log("currentX,Y = " + this.currentX + "," + this.currentY);
    context.drawImage(hermesAvatar, this.currentX, this.currentY, this.avatarWidth, this.avatarHeight);
}; // end draw fxn

Answer 1

Subtract, don’t add, half the width and height:

this.Draw = function () {
    var centerX = this.currentX - this.avatarWidth / 2;
    var centerY = this.currentY - this.avatarHeight / 2;
    // console.log("hermes' supposed draw location = " + centerX + "," + centerY + " | currentX,Y = " + this.currentX + "," + this.currentY);
    // console.log("currentX,Y = " + this.currentX + "," + this.currentY);
    context.drawImage(hermesAvatar, centerX, centerY, this.avatarWidth, this.avatarHeight);
}; // end draw fxn