Ink.requestPresenter() — Methode · JavaScript-Referenz

Signatur

Ink.prototype.requestPresenter(param)

Beschreibung

Die Methode requestPresenter() der Ink-Schnittstelle erreichst du über navigator.ink. Sie gibt ein Promise zurück, das mit einem DelegatedInkTrailPresenter erfüllt wird. Mit diesem Objekt gibst du einen Teil der Strich-Darstellung an das Betriebssystem bzw. den Compositor ab. Das System zeichnet dann den noch fehlenden Strich-Abschnitt zwischen dem zuletzt von deiner Anwendung gerenderten Punkt und der aktuellen Stift- oder Zeigerposition. Diese Vorhersage passiert außerhalb der Render-Pipeline des Browsers.

Gedacht ist das für Zeichen-, Notiz- und Whiteboard-Anwendungen, die mit Stift, Touch oder Maus auf einem <canvas> zeichnen. Ohne den Presenter hängt der gezeichnete Strich meist einige Frames hinter dem Stift her. Mit dem Presenter wirkt der Strich spürbar „direkter“.

Der typische Ablauf sieht so aus:

Einmalig einen Presenter anfordern, optional mit einer presentationArea. Das ist in der Regel das Canvas.
Bei jedem pointermove selbst den Strich bis zum Ereignispunkt zeichnen.
Danach presenter.updateInkTrailStartPoint(event, { color, diameter }) aufrufen. Damit teilst du dem System mit, ab welchem Punkt und in welchem Stil es weiterzeichnen soll.

Parameter

Name	Typ	Default	Beschreibung
$param	{ presentationArea?: Element \| null }	{}	Optionales Objekt mit Einstellungen.
$param.presentationArea	Element \| null	null	Das Element, auf das die vom System gezeichnete Tinten-Spur begrenzt wird. Außerhalb seiner Grenzen (ohne Rahmen und Innenabstand) zeichnet das System nicht. Bei `null` oder ohne Angabe gilt der Viewport. Das Element muss zum aktuellen Dokument gehören.

Rückgabewert

Typ

Promise<DelegatedInkTrailPresenter>

Beschreibung

Ein Promise, das mit einem DelegatedInkTrailPresenter erfüllt wird. Dieser bietet die Eigenschaft presentationArea und die Methode updateInkTrailStartPoint().

Beispiele

Feature-Erkennung und Presenter anfordern

const canvas = document.querySelector('#zeichenflaeche');

const getPresenter = async () => {
  if (!('ink' in navigator)) {
    console.log('Ink API nicht verfügbar – normales Zeichnen');
    return null;
  }
  const presenter = await navigator.ink.requestPresenter({ presentationArea: canvas });
  console.log('Presenter bereit für:', presenter.presentationArea.id);
  return presenter;
};

getPresenter();

Presenter bereit für: zeichenflaeche

Zeichnen auf dem Canvas mit geringer Latenz

const canvas = document.querySelector('#zeichenflaeche');
const ctx = canvas.getContext('2d');
const style = { color: 'rgb(20, 90, 200)', diameter: 6 };
let presenter = null;
let last = null;

if ('ink' in navigator) {
  presenter = await navigator.ink.requestPresenter({ presentationArea: canvas });
}

canvas.addEventListener('pointerdown', (e) => {
  last = { x: e.offsetX, y: e.offsetY };
});

canvas.addEventListener('pointermove', (e) => {
  if (!last) return;
  // 1. Strich selbst bis zum aktuellen Punkt zeichnen
  ctx.strokeStyle = style.color;
  ctx.lineWidth = style.diameter;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(last.x, last.y);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  last = { x: e.offsetX, y: e.offsetY };

  // 2. Den Rest bis zum Stift zeichnet das System
  presenter?.updateInkTrailStartPoint(e, style);
});

canvas.addEventListener('pointerup', () => { last = null; });

Fehlerbehandlung beim Anfordern

const initInk = async (area) => {
  try {
    return await navigator.ink.requestPresenter({ presentationArea: area });
  } catch (err) {
    console.warn('Presenter konnte nicht erstellt werden:', err.name);
    return null;
  }
};

const presenter = await initInk(document.querySelector('canvas'));
console.log(presenter ? 'Delegated Ink aktiv' : 'Fallback aktiv');

Delegated Ink aktiv

// Wichtig · Fallstricke

Kompatibilität: Die Ink API ist experimentell und nur in Chromium-Browsern (Chrome und Edge ab Version 94) verfügbar. Prüfe sie immer mit 'ink' in navigator und halte ein normales Zeichnen ohne Presenter als Fallback bereit.

Fordere den Presenter nur einmal an und verwende ihn danach weiter. Rufe requestPresenter() nicht bei jedem Ereignis neu auf.
updateInkTrailStartPoint() erwartet ein vertrauenswürdiges PointerEvent, also eines, das vom Nutzer ausgelöst wurde. Einen gültigen CSS-Farbwert in color und einen positiven diameter braucht die Methode ebenfalls. Sonst wirft sie einen TypeError oder ein InvalidStateError.
Rufe updateInkTrailStartPoint() erst auf, nachdem du den Punkt selbst gezeichnet hast. Andernfalls entstehen Lücken oder doppelte Striche.
Die Spur vom System ist nur eine vorübergehende Vorhersage. Sie verschwindet im nächsten Frame, den dauerhaften Strich musst du also selbst rendern.
Farbe und Durchmesser sollten zu deinem eigenen Strich passen, sonst sieht man Übergänge.
Die Methode ist nur in einem sicheren Kontext (HTTPS) verfügbar.

Siehe auch

Ink Navigator.ink new PaymentRequestUpdateEvent() GPU.requestAdapter() Window.requestResize()