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.
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.
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 ??