PointerEvent: persistentDeviceId property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The persistentDeviceId
read-only property of the
PointerEvent
interface is a unique identifier for the pointing device generating the PointerEvent
. This provides a secure, reliable way to identify multiple pointing devices (such as pens) interacting with the screen simultaneously.
A persistentDeviceId
persists for the lifetime of a browsing session. To avoid the risk of fingerprinting/tracking, pointing devices are assigned a new persistentDeviceId
at the start of each session.
Pointer events whose generating device could not be identified are assigned a persistentDeviceId
value of 0
.
Value
An integer, or 0
if the device generating the PointerEvent
could not be identified.
Note:
Due to digitizer and pointing device hardware constraints, a persistentDeviceId
may not be available for all pointer events, particularly with older hardware. For example, the pointing device might not report its hardware ID to the digitizer in time for pointerdown
to receive a persistentDeviceId
: it may initially be 0
and change to a valid value for later events in the stroke.
Examples
Assuming the following HTML:
<canvas id="inking-surface" width="1280" height="720"></canvas>
The following JavaScript assigns a different inking color to unique pointers interacting with a canvas:
const colorBlue = 0;
const colorGreen = 1;
const colorYellow = 2;
const colors = [colorBlue, colorGreen, colorYellow];
const pointerToColorMap = new Map();
const colorAssignmentIndex = 0;
const canvas = document.querySelector("#inking-surface");
// Listen for a pointerdown event and map the persistentDeviceId to a color
// if it exists and has not been mapped yet
canvas.addEventListener("pointerdown", (e) => {
if (e.persistentDeviceId && !pointerToColorMap.has(e.persistentDeviceId)) {
pointerToColorMap.set(e.persistentDeviceId, colors[colorAssignmentIndex]);
// Bump the color assignment index and loop back over if needed
colorAssignmentIndex = (colorAssignmentIndex + 1) % colors.length;
}
});
// Listen for a `pointermove` and get the color assigned to this pointer
// if persistentDeviceId exists and the pointer has been color mapped
canvas.addEventListener("pointermove", (e) => {
if (e.persistentDeviceId && pointerToColorMap.has(e.persistentDeviceId)) {
const pointerColor = pointerToColorMap.get(e.persistentDeviceId);
// Do some inking on the <canvas>
}
});
Specifications
Specification |
---|
Pointer Events # dom-pointerevent-persistentdeviceid |
Browser compatibility
BCD tables only load in the browser