Basics
Introduction
This page provides the developer with a basic overview of the HTML5 Pointer Events API, and details on writing and using this API.
It is assumed that the developer has an HTML5 Pointer Events-compatible Wacom tablet attached to their system with an appropriate driver installed. See Getting Started for details.
HTML5 Pointer Events Programming Concepts
The HTML5 Pointer Events API provides support for building a browser application that responds to pen, touch, and mouse input.
The HTML5 Pointer Events guiding philosophy is that a web app should work equally well for pen, touch, and mouse input, so developers can easily code to pointer events to share logic between different input types where it makes sense, and customize for a particular type of input only where necessary to get the best experience.
A web app written using the HTML5 Pointer Events API can be implemented directly in Javascript (or languages that compile to Javascript, such as TypeScript). The focus of this page is not how to teach the reader how to write a web app, but to present a brief overview of HTML5 Pointer Events supported properties and events.
The following table gives an overview of pen, touch and mouse properties supported by HTML5 Pointer Events.
To see the current state of HTML5 Pointer Events support, please visit: https://www.w3.org/TR/pointerevents/
| Property | Pen | Mouse | Touch |
|---|---|---|---|
| X,Y location (pixels) | yes | yes | yes |
| Pressure (unitless) | yes | - | - |
| X,Y tilt (degrees) | yes | - | - |
| Rotation (degrees) | yes | - | - |
| Pen tip/barrel button presses | yes | - | - |
| Down event | yes | yes | yes |
| Up event | yes | yes | yes |
| Move event | yes | yes | yes |
| Hover event | yes | yes | - |
| Enter event | yes | yes | - |
| Leave event | yes | yes | - |
| Cancel event | yes | yes | - |
| Over event | yes | yes | - |
| Out event | yes | yes | - |
| gotpointercapture | yes | yes | yes |
| lostpointercapture | yes | yes | yes |
| PointerID | - | - | yes |
The essential elements of writing an HTML5 Pointer Events web app that can easily respond to and render pen, touch, or mouse input include:
- An HTML5 canvas element that provides a 2D drawing context and ease of handling pointer events
- Making any necessary CSS adjustments, such as those needed to prevent touch scrolling (if touch input is desired for rendering)
- Adding a canvas EventListener handler for HTML5 Pointer Events (such as PointerMove)
- Reading the data sent in the HTML5 Pointer Events to access desired properties (such as X,Y Pressure, etc.)
- Transforming the event data into graphics coordinates for rendering
Please see Sample Code for a complete sample that provides handlers for HTML5 Pointer Events and renders the data in a scribble area.
See Also
Reference - Information on the HTML5 Pointer Events API
FAQs - HTML5 Pointer Events programming tips
Sample Code - Full HTML5 Pointer Events demo sample
These sites also provide very good API overviews with even more programming examples:
- https://mobiforge.com/design-development/html5-pointer-events-api-combining-touch-mouse-and-pen
- https://developer.mozilla.org/docs/Web/API/Pointer_events
Where To Get Help
If you have programming questions about the HTML5 Pointer Events API, please visit our support page at: https://developer.wacom.com/developer-dashboard/support.