<Canvas>

component@pond-ts/chartssource

The DPR-aware <canvas> primitive every chart draw layer sits on. It sizes the backing buffer to width*dpr × height*dpr, keeps the CSS box at width × height, applies setTransform(dpr, …) so the CanvasDraw callback works in CSS-pixel coordinates, clears, and calls draw.

Drawing runs in useLayoutEffect (synchronous, before paint) so there is no flash of an unsized or empty canvas. Setting canvas.width/height resets all context state, so the transform is re-applied on every run — see trap #7 in docs/rfcs/charts.md.

Props

drawCanvasDrawCanvasDrawtype@pond-ts/charts(ctx: CanvasRenderingContext2D, width: number, height: number) => void

A draw callback. The 2D context it receives is already transformed to device pixels, so draw in CSS-pixel coordinates (0..width, 0..height) and it renders crisply at any device-pixel ratio. The context is freshly transformed and cleared before each invocation.

required

Synchronous draw callback, invoked after every (re)size or prop change.

heightnumberrequired

CSS height in pixels.

widthnumberrequired

CSS width in pixels.

classNamestring

dprnumber

Device-pixel-ratio override (defaults to window.devicePixelRatio || 1). Exposed so tests can pin a deterministic backing-buffer size; production callers leave it unset.

styleCSSProperties