No Login Data Private Local Save

Touch Pressure & Radius Visualizer - Online Advanced Input

22
0
0
0

Touch Pressure & Radius Visualizer

Real-time visualization of force, radiusX/Y, rotationAngle & multi-touch data

Detecting... Max Points: -- Force Support: -- Active: 0
Touch here with your fingers or click & drag with mouse (simulated)
Finger 0 Finger 1 Finger 2 Finger 3 Finger 4 Finger 5+
Live Touch Data

No active touch points

Touch the area above to see real-time data
Recent Touch Events
Waiting for touch events...
Frequently Asked Questions

Touch force represents how hard a user presses on the screen, normalized from 0.0 (lightest touch) to 1.0 (maximum pressure). It is exposed via the Touch.force property in the Touch Events API. This feature is primarily supported on devices with pressure-sensitive screens such as iPhone (3D Touch / Haptic Touch), iPad, and some Android flagships. Force detection enables more expressive input—such as varying brush thickness in drawing apps or triggering secondary actions on harder presses.

radiusX and radiusY describe the ellipse of contact between the fingertip and the screen surface. They represent the horizontal and vertical radii (in CSS pixels) of the touch area. A larger contact area typically means a flatter finger press. These values help create adaptive UI elements—for instance, making touch targets appear larger when a user presses with more of their finger pad. The rotationAngle property complements this by indicating the orientation of the contact ellipse.

Force: Best supported on Apple devices with 3D Touch (iPhone 6s–XS) or Haptic Touch (iPhone XR and later), and recent iPads. Most Android devices report force: 0 unless the hardware includes a pressure sensor. Radius: Widely supported across modern iOS and Android browsers (Chrome, Safari, Edge, Firefox). rotationAngle: Supported on most modern touch-enabled browsers. You can use this visualizer tool to instantly check what your specific device reports for each property.

rotationAngle is the angle (in radians) between the long axis of the contact ellipse and the positive Y-axis of the screen. Values range from 0 to π (0° to 180°). A value of 0 means the finger is pointing straight up; π/2 (90°) means the finger is horizontal. This is useful for gesture recognition, stylus input, and creating realistic brush simulations where the brush head orientation matters. Our visualizer draws the ellipse at the exact reported rotation angle so you can see it in action.

Each touch point (finger) is tracked independently with its own identifier, position, force, radius, and rotation angle. The browser exposes all active touch points via the TouchEvent.touches array. Modern devices typically support 5–10 simultaneous touch points. Our visualizer assigns a unique color to each tracked finger and displays all data in real time—making it easy to compare the contact characteristics of different fingers simultaneously.

Yes! If your desktop device lacks a touchscreen, the tool automatically falls back to mouse simulation mode. Click and drag in the touch area to simulate a finger press. The tool generates realistic radiusX/Y values based on mouse movement speed, simulates force with a subtle wave pattern, and calculates rotationAngle from your dragging direction. You can also scroll your mouse wheel over the touch area to adjust the simulated force level (0.1–1.0), allowing you to explore how changing pressure affects the visualization and data display.

This tool is invaluable for front-end developers building touch-optimized web applications. It helps you: ① Debug touch event handling by seeing exactly what data your device reports. ② Calibrate pressure-sensitive UI controls (sliders, brushes, game inputs). ③ Understand cross-device differences—what iPhone reports vs. Android. ④ Test multi-touch scenarios without writing custom debugging code. ⑤ Design adaptive interfaces that respond to finger contact size. Use it alongside Chrome DevTools' device emulation for a complete touch development workflow.
🔧 Related Tools