Responding to pen and stylus interactions (HTML)

Make an app that can create handwritten notes, drawings, and annotations, by adding support for a pen or stylus.

Tip  The info in this topic is specific to developing Windows Store apps using JavaScript.

See Responding to pen and stylus interactions (XAML) for Windows Store app using C++, C#, or Visual Basic.

Prerequisites: If you're new to developing Windows Store apps using JavaScript, have a look through these topics to get familiar with the technologies discussed here.

Create your first Windows Store app using JavaScript

Roadmap for Windows Store apps using JavaScript

Learn about events with Quickstart: adding HTML controls and handling events

App features, start to finish: Explore this functionality in more depth as part of our App features, start to finish series

User interaction, start to finish (HTML)

User interaction customization, start to finish (HTML)

Note  

The platform control libraries (HTML and XAML) provide the full Windows user interaction experience, including standard interactions, animated physics effects, and visual feedback. If you don't need customized interaction support, use these built-in controls.

If the platform controls are not sufficient, these user interaction guidelines can help you provide a compelling and immersive interaction experience that is consistent across input modes. These guidelines are primarily focused on touch input, but they are still relevant for touchpad, mouse, keyboard, and stylus input.

• Guidelines for common user interactions
• Guidelines for optical zoom and resizing
• Guidelines for panning
• Guidelines for rotation
• Guidelines for Semantic Zoom
• Guidelines for visual feedback

Samples: See this functionality in action in our Windows Store app samples.

User interaction customization, start to finish sample

Input: Device capabilities sample

Input: DOM pointer event handling sample

Input: Ink sample

Input: Simplified ink sample

Overview

A pen/stylus can serve as a precision pointing device. It can also be a drawing device associated with digital ink.

The Windows 8 ink platform, together with a pen/stylus device, provides a natural way to create handwritten notes, drawings, and annotations. The platform supports capturing ink data from digitizer input, generating ink data, rendering that data as ink strokes on the output device, managing the ink data, and performing handwriting recognition.

In addition to capturing the spatial movements of the pen as the user writes or draws, your app can also collect info such as pressure, shape, color, and opacity, to offer user experiences that closely resemble drawing on paper with a pen, pencil, or brush.

Note  The ink platform in Windows 8 also supports input from other pointer devices, including touch digitizers and mouse devices.

The inherent precision of pen input is supported naturally by the UI of Windows 8, which is optimized for the imprecise nature of touch. Optimize your Windows Store app design for touch input and get basic pen support by default.

To support pen interactions in scenarios that emphasize direct manipulation, use pen-specific UI to provide equivalent functionality for the users of your app independent of the device they are using. For example, when a pen is detected use a scrollbar to emulate panning or previous and next buttons to flip through pages of content.

In this section

Related topics

Conceptual

Responding to user interaction