Webentwicklung: Ink-API reduziert die Latenzen beim Zeichnen mit digitalem Stift

Das Microsoft-Edge-Team hat eine neue Web-API für das Zeichnen mit einem digitalen Stift im Browser vorgestellt. Die Ink-API ist zunächst über die Dev-Channel-Builds von Edge verfügbar, aber das Team hat sie wohl upstream in das Chromium Open-Source-Projekt implementiert. Auf Betriebssystemseite arbeitet sie mit einer ebenfalls neuen API des kommenden Windows 11 zusammen. Für andere Betriebssysteme wie Windows 10 und Linux übernimmt ein Polyfill im Edge-Browser die Arbeit.

Die Ink-API soll die Latenzen beim Zeichnen mit einem Stift als Eingabegerät im Browser deutlich reduzieren. Die Ankündigung im Microsoft-Edge-Blog verspricht eine Verbesserung von bis zu 240 Prozent. Eine Motivation für das Projekt dürfte eine Optimierung der Stiftnutzung auf Microsofts Surface-Geräten sein.

Event-Loop als Nadelöhr

Traditionell verarbeitet Chromium, der unter anderem die Basis für Microsoft Edge und Google Chrome ist, Stift-Events zunächst im Browser-Prozess und gibt sie schließlich an die JavaScript-Event-Loop weiter. Je nach Auslastung des Main-Thread der Anwendung kommt es dabei zu merklichen Verzögerungen zwischen der physischen Eingabe und der Ankunft des Events in der Anwendung.

Lesen Sie auch

Windows 11: Anforderungen, Updates und Upgrades

Die neue Ink-API verwendet zum Zeichnen der Linien eine neue API von Windows 11, die Events direkt an den Compositor des Betriebssystems übergibt. Dieser verarbeitet weitere Eingabepunkte des Stifts außerhalb der Event-Loop des Browsers und zeichnet die passenden Linien direkt.

Für Windows 10 und Linux übernimmt ein Polyfill die Arbeit der Windows-11-API und versucht, Eingaben anhand vergangener Events und dem letzten bekannten PointerEvent vorherzusagen, um die Linie zu zeichnen. Den Algorithmus für die Vorhersage will das Team in den kommenden Monaten weiter optimieren.

Grundlagen in Chromium und W3C

Die Ink-API ist upstream in Chromium implementiert und standardmäßig in allen Chromium-basierten Browsern aktiviert. Wer sie in eigenen Webanwendungen nutzen will, muss wohl lediglich ein InkPresenter-Objekt vom Browser anfordern und es anschließend mit den Pointer-Events füttern, wie folgendes Codebeispiel aus dem Blog zeigt:

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

Die Spezifikation der API ist als inoffizieller Entwurf der Web Platform Incubator Community Group (WICG) des World Wide Web Consortium (W3C) verfügbar. Es handelt sich explizit um keinen W3C-Standard und ist derzeit auch nicht als solcher geplant. Wer die Preview der Ink-API testen möchte, benötigt zunächst sowohl die jüngste Vorschauversion von Microsoft Edge aus dem Dev Channel als auch einen Insider-Preview-Build von Windows 11.

Weitere Details lassen sich dem Microsoft-Edge-Blog entnehmen.

(rme)