鼠标在画布上的运动图像的中心

Question

I am making for school a star catching game. I want the enviroment to change dynamicly so that when i resize browser windows the game will resize with it.

I got the following running code: http://jsfiddle.net/xigolle/yA74f/

The only problem with that is that the mouse isn't center on the witch. What is the best way for me to get the mouse on the center on every size?

The problem lays for sure in this part:

 ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);

The size of the browser window i get from a event listener who activates when i resize.

And the value is put in canvas.width and canvas.height.

I hope you guys can help me :)

For any more question or unclearance please ask :)

Answer 1

You have two problems

The first is your use of drawImage

ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);

This is going to rescale the witch image in a way that does not keep the proportions, which is why when resizing the window the witch either squishes or expands

You should resize the image based on a ratio of the original image size and original canvas size. Then use that ratio times the new canvas size to get the right image size.

//Original canvas width/height
var initialWidth = 500, initialHeight = 500;
var initialImgWidth = 120, initialImgHeight = 65;
var wRatio =  initialImgWidth/initialWidth, hRatio = initialImgHeight/initialHeight;
...
ctx.drawImage(img, this.x, this.y, canvas.width*wRatio, canvas.height*hRatio);

Now that we have the image resize resolved now we can center the image on the mouse Now to center you have to take the mouse x/y and minus each with 1/2 of width/height of the rescaled witch respectively

Witch.x = event.pageX-((canvas.width*wRatio)/2);
Witch.y = event.pageY-((canvas.height*hRatio)/2);

JSFiddle

EDIT

My rescale calculations were wrong, for now to scale the image for now just scale it by its original dimensions

var imgWScale = initialImgWidth/2;
var imgHScale = initialImgHeight/2;
...
ctx.drawImage(img, this.x, this.y, imgWScale,imgHScale);
...
Witch.x = event.pageX-(imgWScale/2);
Witch.y = event.pageY-(imgHScale/2);

Just remember to center just get the images width/height and divide in half and then take that from the mouse coordinates.