ghostyles/00-template

Source: 00-template.js:19

This file is intentionally heavily commented. Its purpose is not the visual effect itself, but to demonstrate how to build a plugin compatible with the unified model (onInit, onDraw, paintUV, and onClear).

Static Methods

onInit(): string | void

Initialization callback called when the plugin is loaded or activated. Used to set up any initial state, perform one-time calculations, or log initialization.

Returns

• string | void — An optional initialization message.

onDraw(ctx: CanvasRenderingContext2D, landmarks: object)

2D callback called during the face-api rendering tick.

For a teaching template, we want a minimal visual action: a thin circle centered on the nose. We avoid complex shapes to keep the template easy to understand and copy.

Parameters

• ctx (CanvasRenderingContext2D) — The overlay canvas 2D rendering context.
• landmarks (object) — The face-api landmarks object containing facial features.

paintUV(ctx: CanvasRenderingContext2D)

UV callback called during the MediaPipe rendering tick.

This draws a semi-transparent band in the forehead area of the UV texture. It demonstrates that paintUV does not draw directly on the screen/video space, but on the canonical face texture which is then warped onto the 3D face mesh.

Parameters

• ctx (CanvasRenderingContext2D) — The UV texture canvas 2D context.

onClear(ctx: CanvasRenderingContext2D)

Cleanup callback called when the plugin is unloaded or deactivated. Used to clean up any custom event listeners, timers, or custom drawing state.

Parameters

• ctx (CanvasRenderingContext2D) — The overlay canvas 2D rendering context.