Web development: Ink API reduces latency when drawing with a digital pen – Market Research Telecast

The Microsoft Edge team has introduced a new web API for drawing with a digital pen in the browser. The Ink API is initially available through Edge’s dev channel builds, but the team appears to have implemented it upstream into the Chromium open source project. On the operating system side, it works with another new API for the upcoming Windows 11. For other operating systems such as Windows 10 and Linux, a polyfill in the Edge browser does the work.

The Ink API is intended to significantly reduce the latencies when drawing with a pen as an input device in the browser. The announcement in the Microsoft Edge blog promises an improvement of up to 240 percent. One motivation for the project is likely to be to optimize pen usage on Microsoft’s Surface devices.

Event-Loop as Nadelohr

Chromium, which is the basis for Microsoft Edge and Google Chrome, among other things, traditionally processes pen events in the browser process and then forwards them to the JavaScript event loop. Depending on the load on the main thread of the application, there are noticeable delays between the physical input and the arrival of the event in the application.

The new Ink API uses a new Windows 11 API to draw the lines, which transfers events directly to the compositor of the operating system. This processes further input points of the pen outside of the browser’s event loop and draws the appropriate lines directly.

The Ink API processes pen events and initially draws lines independently of the canvas and the event loop of the web application.

(Image: Microsoft)

For Windows 10 and Linux, a polyfill takes over the work of the Windows 11 API and tries to collect inputs based on past events and the last known PointerEvent predict to draw the line. The team intends to further optimize the algorithm for the forecast in the coming months.

Basics in Chromium and W3C

The Ink API is implemented upstream in Chromium and activated by default in all Chromium-based browsers. If you want to use it in your own web applications, you only need a InkPresenterRequest the object from the browser and then feed it with the pointer events, as the following code example from the blog shows:

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 }); });

the Specification of the API is as an unofficial draft of the Web Platform Incubator Community Group (WICG) of the World Wide Web Consortium (W3C). It is explicitly not a W3C standard and is currently not planned as such. If you want to test the preview of the Ink API, you first need both the latest Preview of Microsoft Edge from the Dev Channel as well as an insider preview build of Windows 11.

more details can be found on the Microsoft Edge blog remove.

(rme)

Article Source

Disclaimer: This article is generated from the feed and not edited by our team.

from WordPress https://ift.tt/3D109em
via IFTTT