Windows
Windows
Today we are excited to announce the preview availability of an enhanced inking experience in the latest Dev Channel builds of Microsoft Edge. We first introduced these enhancements during , showcasing how this new web API, which has been implemented upstream in the Chromium open-source project, greatly reduces the latency between the tip of a physical stylus and ink as it’s drawn on the screen. From our initial experiments on Windows 11 Insider Preview Builds, we’ve measured up to a 240% improvement in latency, which we’ve highlighted in green in the animation below: We invite you to try this new and improved inking experience on the web by downloading the latest and running the code sample presented later in this blog post on the latest .
[Exposed=Window]
partial interferace Navigator {
[SameObject] readonly attribute Ink ink;
};
There are only two steps involved to take advantage of this new API:
try {
let canvas = document.querySelector("#canvas");
let presenter = await navigator.ink.requestPresenter({presentationArea: canvas});
window.addEventListener('pointermove', function(event) {
// Gather all of the points that have come from the queue of events.
let points = event.getCoalescedEvents();
points.forEach( p => {
// ... Call renderInkStroke() for your application ...
});
//... Render the ink strong belonging to the dispatched event
// Update the presenter with the last rendered point and give it a style
presenter.updateInkTrailStartPoint(event, {
color: "#7851A9",
diameter: event.pressure * 4
});
});
}
Step (1) invokes the requestPresenter function to acquire an InkPresenter object. The returned presenter represents an OS-backed rendering instance or a native browser-backed polyfill instance (more on this later). Step (2) uses the updateInkTrailStartPoint function to tell the presenter where the last known pointer position is as well as a color and diameter to use in the next few frames until this event fires again. After this, the OS compositor will handle rendering additional ink strokes on the web applications behalf until the next time a pointermove event is delivered to the application.
What’s New?
We’ve introduced a new top level that enables developers to incorporate the new latency improvements into their web applications. This API is accessible as the ink property on the Navigator global object.[Exposed=Window]
partial interferace Navigator {
[SameObject] readonly attribute Ink ink;
};
There are only two steps involved to take advantage of this new API:
- Acquire an InkPresenter object from the browser.
- Notify the InkPresenter with the last trusted pointer event from the device.
try {
let canvas = document.querySelector("#canvas");
let presenter = await navigator.ink.requestPresenter({presentationArea: canvas});
window.addEventListener('pointermove', function(event) {
// Gather all of the points that have come from the queue of events.
let points = event.getCoalescedEvents();
points.forEach( p => {
// ... Call renderInkStroke() for your application ...
});
//... Render the ink strong belonging to the dispatched event
// Update the presenter with the last rendered point and give it a style
presenter.updateInkTrailStartPoint(event, {
color: "#7851A9",
diameter: event.pressure * 4
});
});
}
Step (1) invokes the requestPresenter function to acquire an InkPresenter object. The returned presenter represents an OS-backed rendering instance or a native browser-backed polyfill instance (more on this later). Step (2) uses the updateInkTrailStartPoint function to tell the presenter where the last known pointer position is as well as a color and diameter to use in the next few frames until this event fires again. After this, the OS compositor will handle rendering additional ink strokes on the web applications behalf until the next time a pointermove event is delivered to the application.