Touch.radiusX

Summary

Returns the X radius of the ellipse that most closely circumscribes the area of contact with the touch surface. The value is in CSS pixels of the same scale as Touch.screenX.

This value, in combination with Touch.radiusY and Touch.rotationAngle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. This may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.

Note: This attribute has not been formally standardized. It is specified in the Touch Events – Level 2 Draft specification and not in Touch Events Recommendation. This attribute is not widely implemented.

Syntax

var xRadius = touchItem.radiusX;

Return value

xRadius
The X radius of the ellipse that most closely circumscribes the area of contact with the touch surface.

Example

This example illustrates using the Touch interface's Touch.radiusX, Touch.radiusX and Touch.rotationAngle properties. The Touch.radiusX property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by the touch point's Touch.rotationAngle. Likewise, the Touch.radiusY property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by Touch.rotationAngle. The Touch.rotationAngle is the angle (in degrees) that the ellipse described by radiusX and radiusY is rotated clockwise about its center.

The following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. When the src element is touched, the element's width and height will be calculate based on the touch point's radiusX and radiusY values and the element will then be rotated using the touch point's rotationAngle.

<div id="src"> ... </div>
var src = document.getElementById("src");

src.addEventListener('touchstart', rotate);
src.addEventListener('touchmove', rotate);
src.addEventListener('touchend', rotate);

function rotate (e) {
  var touch = e.changedTouches.item(0);

  // Turn off default event handling
  e.preventDefault();

  // Rotate element 'src'.
  src.style.width = touch.radiusX * 2 + 'px';
  src.style.height = touch.radiusY * 2 + 'px';
  src.style.transform = "rotate(" + touch.rotationAngle + "deg)";
};

Specifications

Specification Status Comment
Touch Events – Level 2 Draft Non-stable version.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
radiusX
Experimental
Chrome Full support 43Edge Full support ≤79Firefox ? IE No support NoOpera Full support YesSafari No support NoWebView Android Full support 43Chrome Android Full support 43Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.