PrismPrism Atlantic
Real NOAA/NHC storm-track data with canvas-rendered tracks and Prism-managed HTML/CSS surfaces.
runtime · built on the HTML-in-Canvas proposal
Runtime infrastructure for managed HTML/CSS canvas surfaces.
Prism does not replace your renderer. It gives canvas applications managed DOM-authored surfaces, with runtime support for registration, paint lifecycle, coordinate conversion, invalidation, readiness, and cleanup.
npm i @synthesisengineering/prismEnable the browser flag to view the live Prism runtime.
chrome://flags/#canvas-draw-elementsurface · #s_1f3
Surface registeredbounds · 184 × 92
origin · (28, 86)
attached · <canvas>register.tsts
const runtime = new CanvasRuntime(canvas);
runtime.registerSurface(el, opts);
await runtime.paintOnce();tooltip · surface#3
x · y460.0, 180.5
value0.612
Prism paint pass
registered
paintOnce()
ready
01 · Boundaries
What Prism owns
Prism is a DOM-surface runtime, not a renderer or framework. It manages surfaces, paint, and timing and stays out of your render decisions.App owns
Userland- state
01 - data
02 - templates
03 - transforms
04 - rendering decisions
05 - animation loop
06 - interaction state
07
Prism owns
Runtime- CanvasRuntime
01 - CanvasSurface registration
02 - paint lifecycle
03 - invalidation
04 - CSS-pixel bounds
05 - paint readiness
06 - cleanup
07
02 · Pipeline
The surface model
One pass, four stages. Prism owns registration and painting; your code owns the source element and the final canvas frame.01 · App
HTML elementyour DOM/JSX02 · Prism
Prism surfaceregisterSurface()03 · Prism
canvas paint passpaintOnce()04 · App
canvas framedisplay · toBlob()03 · Reference apps
Examples
Four apps built on Prism. Start with the one closest to what you are shipping.React Composer Lite
React-authored components as movable, transformable, exportable Prism surfaces.
Prism Atelier
DOM-authored HTML/CSS/SVG surfaces used as repeated canvas material for generative artwork.
Pie Chart
Minimal canvas/data example adapted from the WICG HTML-in-Canvas repo.