Function: durableCanvas()

durableCanvas(key, init?): DurableCanvas

Defined in: adopt.ts:139

A canvas held in the durable registry, plus the adoption ritual that goes with it — created once, re-parented by every hot-swapped component, and never taken from a successor that already adopted it.

Extracted from three hand-rolled copies (morphogen's SimCanvas, aztec's AztecCanvas, the pencil Lab's pad), each of which had to re-derive the ordering hazard in a comment.

// store.ts — created once, survives every hot edit
export const field = durableCanvas("morphogen:field", (c) => {
  c.width = c.height = 512;
  c.className = "sim-canvas";
});

// SimCanvas.tsx — freely hot-swapped; the pattern keeps cooking
return <div class="sim-host" ref={field.adopt((canvas) => {
  canvas.addEventListener("pointerdown", down);
  return () => canvas.removeEventListener("pointerdown", down);
})} />;

Note what this does not do: it does not own a rendering loop, a context, or a device. An imperative island that is a framework-free library — the pencil's PencilSurface, which is unit-tested in node and instantiated by three different apps — creates its own canvas and is adopted with plain adopt. This is sugar for the other case: where the canvas is simply app state, and the store is the only thing that would ever have made it.

Parameters

key

string

init?

(canvas) => void

Returns

DurableCanvas