navigator.ink is a read-only property that returns an Ink object for the current document — the entry point for the Ink API (MDN). Use it to get a DelegatedInkTrailPresenter for lower-latency pen/stylus strokes.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.ink. Start with this line.
navigator.ink| Call | What it does |
|---|---|
navigator.ink | Primary signature. |
Built into the browser. Read navigator.ink on Navigator — no import required.
navigator.ink| Parameter | Description |
|---|---|
| requestPresenter() | Required. Get a DelegatedInkTrailPresenter |
| presentationArea | Optional. Element border box; omit → viewport |
| Return Value | Description |
|---|---|
| * | Ink object |
Check whether the Ink API is available before calling it.
const supported = "ink" in navigator;
console.log(supported ? "Ink API available" : "Ink API missing");in. "ink" in navigator checks for the property.requestPresenter()Ask for a presenter tied to your canvas presentation area.
async function getPresenter(canvas) {
if (!("ink" in navigator)) {
console.log("unsupported");
return null;
}
const presenter = await navigator.ink.requestPresenter({
presentationArea: canvas
});
console.log("Presenter ready");
return presenter;
}
getPresenter(document.querySelector("#c"));ink is missing.requestPresenter. Returns a DelegatedInkTrailPresenter (MDN).presentationArea confines rendering to that element’s border box.null defaults to the containing viewport.Draw the final point yourself, then ask the presenter to fill the gap until the next move.
const canvas = document.querySelector("#c");
const ctx = canvas.getContext("2d");
const style = { color: "lime", diameter: 10 };
let presenterPromise = null;
if ("ink" in navigator) {
presenterPromise = navigator.ink.requestPresenter({
presentationArea: canvas
});
}
canvas.addEventListener("pointermove", async (evt) => {
ctx.fillStyle = style.color;
ctx.fillRect(evt.offsetX, evt.offsetY, 10, 10);
if (!presenterPromise) return;
const presenter = await presenterPromise;
presenter.updateInkTrailStartPoint(evt, style);
});updateInkTrailStartPoint. Pass the trusted pointer event and style.Navigator.ink (Ink API) is Experimental and Limited availability (not Baseline) on MDN. Use feature detection — do not assume every browser can delegate ink trails.
Support is strongest in Chromium-based browsers (Chrome 94+, Edge 93+, Opera). Firefox and Safari typically omit the Ink API. Always feature-detect.
Bottom line: Detect Ink, request a presenter for your canvas, update the trail on pointermove, and keep Pointer Events drawing as the fallback.
Learn the navigator.keyboard entry for the Keyboard API.
11 people found this page helpful