InkPresenter: updateInkTrailStartPoint() method

event Optional

A PointerEvent.

style

An object defining the trail style, which contains the following properties:

color

A String containing a valid CSS color code, indicating the color the presenter will use when rendering the ink trail.

diameter

A number representing the diameter the presenter will use when rendering the ink trail.

undefined.

Error DOMException

An error is thrown and the operation is aborted if the:

• color property does not contain a valid CSS color code.
• diameter property is not a number or less than 1.
• presentationArea element is removed from the document before or during rendering.

In this example, we draw a trail onto a 2D canvas. Near the start of the code, we call Ink.requestPresenter(), passing it the canvas as the presentation area for it to take care of and storing the promise it returns in the presenter variable.

Later on, in the pointermove event listener, the new position of the trailhead is drawn onto the canvas each time the event fires. In addition, the InkPresenter object returned when the presenter promise fulfills has its updateInkTrailStartPoint() method invoked; this is passed:

• The last trusted pointer event representing the rendering point for the current frame.
• A style object containing color and diameter settings.

The result is that a delegated ink trail is drawn ahead of the default browser rendering on the app's behalf, in the specified style, until the next time it receives a pointermove event.

HTML

<canvas id="canvas"></canvas>
<div id="div">Delegated ink trail should match the color of this div.</div>

CSS

div {
  background-color: rgb(0 255 0 / 100%);
  position: fixed;
  top: 1rem;
  left: 1rem;
}

JavaScript

const ctx = canvas.getContext("2d");
const presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
let move_cnt = 0;
let style = { color: "rgb(0 255 0 / 100%)", diameter: 10 };

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

canvas.addEventListener("pointermove", async (evt) => {
  const pointSize = 10;
  ctx.fillStyle = style.color;
  ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);
  if (move_cnt == 20) {
    const r = getRandomInt(0, 255);
    const g = getRandomInt(0, 255);
    const b = getRandomInt(0, 255);

    style = { color: `rgb(${r} ${g} ${b} / 100%)`, diameter: 10 };
    move_cnt = 0;
    document.getElementById("div").style.backgroundColor =
      `rgb(${r} ${g} ${b} / 60%)`;
  }
  move_cnt += 1;
  await presenter.updateInkTrailStartPoint(evt, style);
});

window.addEventListener("pointerdown", () => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
});

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Result

• Enhancing Inking on the Web