Touch Coordinate Logger

How the Touch Coordinate Logger Works

The Touch Coordinate Logger records the X and Y position of every contact in pixels and lists each position with a timestamp. Positions start from the top-left corner of the surface at (0, 0).

1. Tap or drag: Each contact records its X and Y position.
2. Choose the coordinate system: Switch between surface, page and screen coordinates.
3. Read the log: Each row shows time, pointer ID, X, Y and input type.
4. Export the data: Download the log as a comma-separated values (CSV) file.

Touch Coordinate Logger Formula

The Touch Coordinate Logger surface position equals the client position minus the surface's top-left offset.

clientX, clientY

Touch position in the browser window

rect.left, rect.top

Top-left corner of the surface

Example: A touch at clientX = 260, clientY = 410 on a surface whose corner sits at (20, 150) logs as (240, 260).

Touch Coordinate Logger Reference Table

The Touch Coordinate Logger conversion table converts CSS pixel positions into physical distance from the top-left corner.

About the Touch Coordinate Logger

A Touch Coordinate Logger is a data tool that records where each contact lands on the screen. The log forms the base for heatmaps, accuracy tests and path drawings.

Browsers report touch positions in CSS pixels, which are device-independent units of 1/96 inch. A phone with a device pixel ratio of 3 packs 3 physical pixels into each CSS pixel, so the logged values stay comparable across screens.

Ways to Use the Touch Coordinate Logger

The Touch Coordinate Logger has 5 main uses, including UX research and screen calibration checks.

• ✓UX research: Designers see exactly where users tap on a layout.
• ✓Screen calibration checks: Technicians compare tap positions with marked points.
• ✓Game analytics: Developers log where players touch during a level.
• ✓Motor studies: Researchers measure how far taps drift from a target.
• ✓Data export: Analysts load the CSV file into spreadsheets for charts.