Canvas

Renderer slot for 2D, WebGL, or WebGPU output.

Category: Visualization

Slots: 3

States: 2

Writer: Legacy

cre8.primitive.canvas

Live renderLegacy writer: Canvas

2D/WebGL Surface · 640x240Canvas Ready

<Canvas
  aria-label="Dynamic topology render canvas"
  contextType="2d"
  height={240}
  id="topology-canvas"
  role="img"
  width={640}
>
  <Container variant="canvas-placeholder">
    <Text text="2D/WebGL Surface · 640x240" variant="code" />
    <Badge intent="info" label="Canvas Ready" />
  </Container>
</Canvas>

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

Slot	DOM class
root	.primitive-canvas
surface	—
status	—

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States

loadinginteractive

Platforms

webruntime-nodecanvas

Recipes

unstyledruntime-console

The example above still needs shared writers for: Canvas.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

Target	Renderer	Status
web	react	experimental
runtime-node	view-node	ready
ssr	html-visualization-placeholder	ready
terminal	terminal-text	planned
canvas	canvas-adapter	experimental

Semantic structure must stay available without visual styling.

Expose meaningful names for interactive controls.
Keep keyboard and pointer behavior equivalent where the platform supports it.
Publish state with native semantics and data attributes where the adapter supports them.

Canvas

Preview

Anatomy

States and platforms

Renderers

Accessibility