@geometra/renderer-canvas

@geometra/renderer-canvas

Canvas2D renderer for Geometra. Renders UI element trees to an HTML <canvas> element with full hit-testing and text selection support.

Install

npm install @geometra/renderer-canvas

Key exports

• createBrowserCanvasClient — official browser bootstrap for thin-client canvas apps (createClient + CanvasRenderer + selection + accessibility mirror + focus wiring)
• CanvasRenderer — renders Geometra element trees to a canvas context
• layoutInspector — optional HUD (frame counter, render ms before HUD, node count, depth, root size, focus + Tab order, optional hit path when inspectorProbe is set); off by default
• lastRenderWallMs — wall time of the last full render() (ms), including overlays; readable for HUDs / metrics
• lastLayoutWallMs — last computeLayout time (ms) when using createApp (via optional Renderer.setFrameTimings)
• inspectorProbe — set { x, y } in layout coordinates before render to show hitPathAtPoint in the HUD
• enableSelection — text selection on the canvas
• enableAccessibilityMirror — hidden accessibility DOM mirror from geometry

Usage

import { createBrowserCanvasClient } from '@geometra/renderer-canvas'

const canvas = document.getElementById('app') as HTMLCanvasElement
createBrowserCanvasClient({
  canvas,
  url: 'ws://localhost:3200',
  binaryFraming: true,
  autoFocus: true,
  rendererOptions: {
    background: '#08111f',
  },
})

If you need lower-level control, the renderer package still exposes CanvasRenderer, enableSelection, and enableAccessibilityMirror directly.

Links

• Main repo