canvasResolution

Reads the current drawing buffer size of a canvas and optionally watches for resize changes. Use it when you need [width, height] uniforms without wiring observers manually.

Import

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

Signature

export function canvasResolution(
  canvas: HTMLCanvasElement,
  opts?: { readonly observe?: boolean },
): CanvasResolution;

Parameters

Returns: CanvasResolution — exposes width, height, and dispose(). Without observe: true, width and height are the initial drawing-buffer snapshot; with observe: true, they update when the ResizeObserver callback runs.

Examples

import { canvasResolution } from "@vgpu/render/utils";
 
const canvas = document.createElement("canvas");
const effect = { set(values: { readonly resolution: readonly [number, number] }): void { void values; } };
const resolution = canvasResolution(canvas, { observe: true });
 
function frame() {
  effect.set({ resolution: [resolution.width, resolution.height] });
  requestAnimationFrame(frame);
}
 
frame();
// Later:
resolution.dispose();

Notes

• When observe is false, width/height stay at the values captured when canvasResolution(...) was called. Create a new CanvasResolution or pass observe: true if later canvas attribute changes must be reflected.
• The helper calls ResizeObserver.observe(canvas) only when observe: true; call dispose() before removing the canvas to disconnect the observer.
• The returned values reflect the drawing buffer size (canvas.width/height), which already accounts for DPR scaling if you manage it manually.
• See also: canvasMouseTracker, frameClock