JavaScript Navigator ink Property

What You’ll Learn

navigator.ink is the entry point for the Ink API. Learn the Ink object, requestPresenter, delegated ink trails for smoother pen drawing, five examples, and try-it labs.

Introduction

Drawing with a stylus on the web often feels slightly behind your hand. Your app receives pointer events, paints on a canvas, and the browser composites frames — each step adds a little delay.

The Ink API helps with that. navigator.ink returns an Ink object. From it you call requestPresenter() to get a DelegatedInkTrailPresenter that can render temporary ink strokes with less lag while your own canvas code finishes the final path.

Understanding the ink Property

Think of navigator.ink as the “front desk” for delegated ink trails in the current document.

• Ink object — entry point returned by navigator.ink.
• requestPresenter() — asks for a DelegatedInkTrailPresenter.
• presentationArea — usually your drawing <canvas> element.
• Delegated trail — system-assisted temporary stroke for lower latency.
• Fallback — Pointer Events + canvas when the API is missing.

📝 Syntax

General form of the property:

navigator.ink

Value

• An Ink object when the Ink API is available.
• Missing / unavailable when the browser does not support it.

Common patterns

// MDN-style init:
async function inkInit(canvas) {
  if (!navigator.ink) {
    throw Error("Ink API not supported.");
  }
  const ink = navigator.ink;
  const presenter = await ink.requestPresenter({
    presentationArea: canvas
  });
  // Use presenter with your pointer drawing loop…
  return presenter;
}

// Safe feature-detect:
if ("ink" in navigator && navigator.ink) {
  // Ink entry point is available
}

Examples Gallery

Examples follow MDN navigator.ink / requestPresenter patterns. Prefer Try It Yourself in a supporting browser. Presenter setup needs a real <canvas>.

const supported = Boolean(navigator.ink);
console.log(supported ? "Ink API available" : "Ink API missing");

Ink API missing
(or "Ink API available" in a supporting browser)

if (!navigator.ink) {
  console.log("unsupported");
} else {
  const ink = navigator.ink;
  console.log("has requestPresenter: " +
    (typeof ink.requestPresenter === "function"));
}

unsupported
(or "has requestPresenter: true")

async function getPresenter(canvas) {
  if (!navigator.ink) {
    return "Ink API not supported.";
  }
  const presenter = await navigator.ink.requestPresenter({
    presentationArea: canvas
  });
  return "Presenter ready: " + (presenter.constructor?.name || "ok");
}

// In a page with :
// getPresenter(document.getElementById("c")).then(console.log);

Ink API not supported.
(or "Presenter ready: …" when supported)

async function inkInit(canvas) {
  const ink = navigator.ink;
  if (!ink) {
    throw Error("Ink API not supported.");
  }
  let presenter = await ink.requestPresenter({
    presentationArea: canvas
  });
  // …
  return presenter;
}

inkInit(document.createElement("canvas"))
  .then(function () { console.log("inkInit ok"); })
  .catch(function (err) {
    console.log(String(err.message || err));
  });

Ink API not supported.
(or "inkInit ok")

function inkStatus() {
  const available = Boolean(navigator.ink);
  return {
    available: available,
    hasRequestPresenter: available &&
      typeof navigator.ink.requestPresenter === "function",
    advice: available
      ? "Call requestPresenter({ presentationArea: canvas })"
      : "Fall back to Pointer Events + canvas drawing"
  };
}

console.log(JSON.stringify(inkStatus()));

{"available":false,"hasRequestPresenter":false,"advice":"Fall back to Pointer Events + canvas drawing"}

🚀 Common Use Cases

• Note-taking apps — handwriting that feels closer to paper.
• Sketch / whiteboard tools — stylus strokes with less lag.
• Signature pads — smoother pen capture on tablets.
• Education — teach Ink as an optional layer over Pointer Events.
• Progressive enhancement — Ink when present; canvas-only otherwise.

📝 Notes

• Experimental and not Baseline — support is limited.
• Not Deprecated or Non-standard on MDN.
• Main method for beginners: requestPresenter({ presentationArea }).
• Always keep a Pointer Events + canvas fallback.
• Related: keyboard, hid, JavaScript hub.

💡 Best Practices