deviceTest: the example rendered no text at all

[obiot]

Opening the Device Test example showed a red ball on black and nothing else — none of the eight readouts.

Cause

Nine calls used the old Font blitter signature:

this.font.draw(renderer, `Gamma: ${device.gamma}`, 10, 0);

Text#draw() takes the renderer and nothing else, so the last three arguments were dropped on every call. Each one drew the same label — constructed with no text — at (0, 0).

Fix

A Text is a renderable, so each readout is positioned and then drawn:

private line(renderer, text, x, y) {
    this.font.pos.x = x;
    this.font.pos.y = y;
    this.font.setText(text);
    this.font.draw(renderer);
}

pos.x / pos.y per component, because pos.set(x, y) is the 2-argument form and zeroes z — which is depth.

Two faults only visible once text rendered

• the default textBaseline put the first line at y = 0 mostly above the canvas, so it never appeared — now top, with the lines starting at 30
• the bottom message at height - 30 was clipped — now height - 40

This also depends on the Text positioning fix from #1662: repositioning a label between draws used to leave the glyphs at the old spot, which is exactly what this helper does eight times a frame.

Verification

Captured in Chrome: all eight readouts render (Gamma … orientation, plus the motion-detection message), no page errors. Types clean, pnpm lint 0 errors.

No CHANGELOG entry — examples aren't part of the published package.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NGvtaUNATVCVxD2qcbiY4t

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.