JavaScript event touch coordinates weird when zooming in

Question

I have found that when someone zooms in on a web page*, and then touches an element, the touch x and y positions are rather strange. Because I’m drawing the buttons on a canvas, I need to know exactly where the x and y are so I can detect if a button has been pressed. I want to find the coordinates, relative to the top-left of the screen, and multiplied by how much the user is zoomed in. (Basically, I want the x and y so if I put a red dot on the canvas at that position, the red dot would be exactly where I pressed.) Thanks for your help in advance.

* Tested on iOS 12.2

Answer 1

Juan David Padilla Diaz How much do you zoom in?

Answer 2

Juan David Padilla Diaz Ok! Thanks!

Answer 3

Juan David Padilla Diaz I’m drawing the buttons on a canvas, and I need the touch position to determine whether or not the client pressed in the area for the button. I have a touch event, but when I zoom in on the web page, the event x and y are beyond my understanding. You can see it happening at https://walkworld.glitch.me, by zooming in using two fingers, then trying to press the buttons.

Answer 4

Juan David Padilla Diaz Are you using iOS or Android?

Answer 5

Juan David Padilla Diaz I’m using iOS, so Android must not have this issue. I’m afraid that because you have not encounted this issue yourself, you cannot help me solve this problem.

Answer 6

Juan David Padilla Diaz Here is the link to the screen recording: https://cdn.glitch.com/d1dd1efd-a32e-4ce6-b747-b2ed5d10914e%2F591F0A5B-4C9B-49D7-AF74-2FE8A52CEB7D.MP4?1555899052940
Note that you can’t see where I’m pressing, both times I’m pressing the Info button.

Answer 7

Rowsej actually when I zoom in the button works, I think this is a problem in design because js is doing its job very well, you can try positioning the buttons. Other options is to disable the zoom in your game

Answer 8

Correct me if I'm wrong. I understood that you want to know if a button was pressed? To do that you can use an event to detect it, but, if you want to know where did the user click on etc you should use touch events, I have a code that does that actually

Answer 9

Rowsej give me few mins to search the code that does what you want

Answer 10

Android

Answer 11

All what I could

Answer 12

Rowsej you can try to record what your problem is about you I can see and maybe help you to solve it

Answer 13

Rowsej hey I already saw the video and now I understand what's happening, I'll think on a solution for this, but I'll be tomorrow, it's late for me right now

Answer 14

I love how no one has really answered