Canvas animation owns a rendered surface. Treat each Canvas area or 2D scene as a component with mount, dimensions, assets, graph nodes, state, lifecycle, and debug output.

CanvasArea shape

• CanvasArea fields include id, name, activeWhen, mountSelector, width, height, backgroundColor, fps, duration, viewport, interactionMode, objects, tracks, dataflow, graph, and previewMode.
• mountSelector is optional for headless producers but required for a visible mounted area.
• viewport.fit supports contain, cover, fill, none, fitWidth, fitHeight, and scaleDown.

Modern 2D scene shape

• Scene2D uses kind: "2d", common scene fields, optional viewport, objects, optional graph.nodes, and optional tracks.
• Use output for headless render-to-texture producers and mountSelector for visible scenes.
• Use graph nodes for drivers, timelines, expressions, animation clips, and boundary writes.

Canvas verification

• Check that the Canvas is nonblank on first paint, after resize, after route changes, and after tab visibility changes.
• Use debug nodes and texture stats when a scene renders differently than expected.
• Tune particle counts, mesh density, texture size, and state-machine complexity on realistic devices.

Verified runnable example

This guide points to proof-backed sample coverage. The full ledger lives in Generated examples and proof log.

Canvas: Fill rule diagnostic

• Source: faster-motion/demo/tests/canvas/fillrule-diagnostic/fillrule-diagnostic.fmtion
• Expected output: A contained Canvas scene renders paired path cases so nonzero and evenodd fill handling can be compared visually.
• Validation: Schema validation passed. Runtime proof reports zero blocking runtime issues and 10 rendered objects; the accepted metadata note is preserved in the proof ledger.
• Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-desktop.png
• Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-mobile.png

Guide-specific sample target: 2D Canvas sample with mount, one object, one time input, one state machine transition, and nonblank screenshot proof.

Faster Motion docs

Use this local map together with the left navigation. The source-backed content tree controls the main article order; this section keeps related pages one click away.

Start

• Faster Motion docs map
• Faster Motion documentation overview
• Get started with Faster Motion
• Faster Motion concepts
• .fmtion file format

DOM animation

• DOM animation guide
• DOM selectors and targets
• Scroll animation
• Pointer, hover, and drag inputs
• Text, SVG, and path animation
• Responsive gates and parameter overrides

Canvas animation

• Canvas animation guide
• Canvas area lifecycle
• Canvas objects, assets, and rendering
• Canvas inputs and state machines

3D and procedural

• Canvas 3D and procedural guide
• 3D scenes, cameras, and lights
• Procedural geometry and fields
• Particles and physics

Reference

• Node reference index
• Node categories reference
• Runtime loading and publishing
• Runtime API reference
• Debugging and preflight
• Debug API reference
• Validation errors and warning codes
• Faster Motion production checklist
• Faster Motion recipes overview