Adding gestures to an application can significantly improve the user experience. There are many types of gestures, from the simple single-touch swipe gesture to the more complex multi-touch twist gesture, where the touch points (aka pointers) move in different directions.
This document demonstrates how to use pointer events and <canvas> to build a multi-touch enabled drawing application. This example is identical to the application described in the Touch events Overview except this example uses the pointer events input event model (instead of touch events. Another difference is that because pointer events are pointer device agnostic, the application accepts both touch input, pen and mouse input, the latter two for free.
Pointer capture allows events for a particular pointer event (PointerEvent) to be re-targeted to a particular element instead of the normal target (or hit test) at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).
A pointer is a hardware agnostic representation of input devices (such as a mouse, pen or contact point on a touch-enable surface). The pointer can target a specific coordinate (or set of coordinates) on the contact surface such as a screen.
The height of the pointer's contact geometry, along the Y axis (in CSS pixels). Depending on the source of the pointer device (for example a finger), for a given pointer, each event may produce a different value.
The property indicates whether or not the pointer device that created the event is the primary pointer. Returns true if the pointer that caused the event to be fired is the primary device and returns false otherwise.
An identifier assigned to a pointer event that is unique from the identifiers of all active pointer events at the time. Authors cannot assume values convey any particular meaning other than an identifier for the pointer that is unique from all other active pointers.
The normalized pressure of the pointer input in the range of 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. For hardware that does not support pressure, including but not limited to mouse, the value MUST be 0.5 when the pointer is active and 0 otherwise.
This property is the angle (in degrees) between the Y-Z plane of the pointer and the screen. This property is typically only useful for a pen/stylus pointer type. The range of values is -90 to 90 degrees and a positive value means a tilt to the right. For devices that do not support this property, the value is 0.