This demo implements a simple web drawing app showing how to use HTML5 Pointer Events. With HTML5 Pointer Events, you can create an app that is compatible on many popular browsers that detect pen ink, mouse, and touch data using a single unified API. HTML5 Pointer Events is supported on most, but not all popular browsers. For those browsers that do not support HTML Pointer Events, one solution is to use the older CSS pointer events API, which is also demonstrated in the app.
To run this application, a Wacom tablet driver must be installed and a supported Wacom tablet must be attached. All Wacom tablets supported by the Wacom driver are supported by this API. Get the driver that supports your device at: https://www.wacom.com/support/product-support/drivers.
When you load the sample code, ScribbleDemo.html, into a browser, you will get a drawing canvas, some simple controls, and a field to look at HTML5 Pointer Events data. The main focus of ScribbleDemo.html is, of course, to scribble with pen ink, touch or mouse data. Pen and touch-enabled Wacom tablets provide pen ink data and touch data that includes properties that are used to modify the drawing strokes.
The HTML5 Pointer Events app supports the following:
- Drawing with pen, touch and mouse input
- Detection of whether the browser you're using supports HTML5 Pointer Events
- Using pen pressure to modify pen strokes
- Using pen tilt to modify pen strokes
- Setting pen color (primary for pen tip, secondary for pen button press)
- A debug monitor that shows input data
- Saving the drawing to a png file
The following illustrates the demo running on Chrome:
| # | Description |
|---|---|
 |
Indicates the browser supports HTML5 Pointer Events |
 |
Selectable Primary pen color |
 |
Selectable Secondary pen color by pen button selection |
 |
Pen stroke using tilt |
 |
Pen stroke using pressure only |
 |
Touch stroke |
 |
Mouse stroke |
 |
Debug window showing pointer data |
Overview - HTML5 Pointer Events overview
Basics - Details on how to start writing HTML5 Pointer Events applications
Reference - Information on the HTML5 Pointer Events API
FAQs - HTML5 Pointer Events programming tips
If you have questions about this demo or the Wintab API, please visit our support page: https://developer.wacom.com/developer-dashboard/support
This sample code is licensed under the MIT License: https://choosealicense.com/licenses/mit/