canvasMouseTracker

Listens for pointer movement over a canvas and exposes the latest coordinates. Use it to feed shaders with mouse positions without wiring global event listeners.

Import

import { canvasMouseTracker } from "@vgpu/render/utils";

Signature

export function canvasMouseTracker(spec: CanvasMouseTrackerSpec): CanvasMouseTracker;

Parameters

Returns: CanvasMouseTracker — exposes a live position tuple ([x, y]) and a dispose() method that removes the internal event listener.

Examples

import { canvasMouseTracker } from "@vgpu/render/utils";
 
const canvas = document.createElement("canvas");
const effect = { set(values: { readonly mouse: readonly [number, number] }): void { void values; } };
const mouse = canvasMouseTracker({ canvas, normalize: true, flipY: true });
 
function frame() {
  const [u, v] = mouse.position; // normalized UV with origin at bottom-left
  effect.set({ mouse: [u, v] });
  requestAnimationFrame(frame);
}
 
frame();
// Later:
mouse.dispose();

Notes

• The initial position is [0, 0] until the first pointer event fires; guard against that if your shader requires seeded values.
• The tracker prefers PointerEvent.offsetX/Y when available, falling back to clientX/Y minus the canvas bounds, so it works with both pointer-lock and classic pointer events.
• Call dispose() before removing the canvas from the DOM to avoid dangling listeners.
• See also: canvasResolution, frameClock

CanvasMouseTrackerSpec

Configuration object accepted by canvasMouseTracker.

Fields

CanvasMouseTracker

Handle returned by canvasMouseTracker.

Fields