Reference

Renderer Contract

Look up syntax, contracts, layouts, algorithms, and exact behavior.

Renderers consume engine state and entities; they do not own simulation state. The same scene graph can be stepped once and projected into different output targets. The canvas renderer uses imperative drawing commands, while the React renderer converts transforms into DOM/CSS output.

\operatorname{render}: EngineState \rightarrow Entity \rightarrow Output

Render signature. A renderer is a curried function from engine state and entity to a target-specific output.

save context
translate(entity.position)
rotate(entity.rotation)
scale(entity.scale)
translate(-entity.anchor)
draw entity body
restore context

Canvas transform order. The canvas path maps entity transform fields directly onto 2D context operations.

The debug overlay is part of the renderer contract. Anchor markers, position markers, and relationship lines expose the transform basis used by the renderer, so visual output can be compared against the tree inspector without consulting source code.

Renderer Contract

Continue exploring