Skip to main content



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:

X,Y location (pixels)yesyesyes
Pressure (unitless)yes--
X,Y tilt (degrees)yes--
Rotation (degrees)yes--
Pen tip/barrel button pressesyes--
Down eventyesyesyes
Up eventyesyesyes
Move eventyesyesyes
Hover eventyesyes-
Enter eventyesyes-
Leave eventyesyes-
Cancel eventyesyes-
Over eventyesyes-
Out eventyesyes-

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:

Where To Get Help

If you have programming questions about the HTML5 Pointer Events API, please visit our support page at: