How to get image coordinates in javascript?

Hi,

I am trying to do some code on getting mouse coordinates of an image in javascript, but the problem I am facing is that if image is say of size 2500 x 1000 but in browser its displayed as 1170 x 735 then I am able to get coordinates on 1170 x 735 only not the original size of 2500 x 1000.

How do I get coordinates of 2500x1000 ??? Please help.

Thanks.

If you have an x and y for the 1170 x 735 canvas then you should only need simple maths for this.

var x = xMouse * (1170 / 2500)
var y = yMouse * (735 / 1000)
1 Like

Hi,

I am looking for something like this: https://pixelgecko.com/play/24-competition-23?game_prize_id=727&link_type=play_game, no matter what screen size you have i.e you’re viewing in pc or on mobile phone, the football in the picture you can move upto 2500 x 1500. Now the actual size of the picture that is being displayed is not really 2500 x 1500.

How do I achieve the same ??

Thanks.

Same answer as above.

It’s just the canvas size that changes on devices.

var x = xMouse * (canvasWidth / 2500)
var y = yMouse * (canvasHeight / 1000)

If this doesn’t help you’ll need to provide the code you’re working with.

Hi,

Its not working, my code is following:

[code]

<img id=“imgGame” width=“1280” height=“725” src=“pictures/<?=$a0["game_picture"]?>” />


Coordinates
[/code]

The issue is that picture’s natural size is: 1280 x 725 but it is displayed on screen at: 848 x 480 and if I view it on a mobile then size again changes and reduces further. How do I calculate the x,y position of cursor according to picture’s natural size ??

Thanks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.