track mouse movements on 800 x 600 and show on 1024 x 768

Question

i am tracking the mouse movements of a user using javascript and storing it along with the browser resolution. Then i can check the user mouse movement in my browser which is 1024 x 768 resolution. But if the user is using a browser in 800 x 600 then the mouse movements are recorded wrt 800 x 600. And when i see the mouse movements in 1024 x 768 the mouse movements are wrong. So how can i scale from 800 x 600 to 1024x 768?

Answer 1

You basically multiply the user's x / y coordinates with the width / height ratio:

x *= 1024/800;
y *= 768/600;

I suggest you also apply a Math.round() on both the coordinates after applying the ratio.

Edit: This, of course, assumes that everything in the larger resolution is resized by the same ratio for the user, otherwise, there will be problems.

For example, if you are trying to overlay the mouse movement over a webpage, and that webpage has a 200px fixed-width sidebar whatever the user's resolution is, then of course when you multiply the x/y coordinates with the ratio, you may find that the pointer is not even above the sidebar like it was for the user.

Edit2: In the case of a webpage, the safest way would be to record the user's viewport width / height, and then embed the same webpage in a container (like an iframe) with that exact size in order to replay the actions. This way you avoid some issues.

Answer 2

How about you resize the browser to match the user's dimensions?