Canvas scenes stay maintainable when visual objects, imported assets, render layers, and graph ownership are explicit.

Asset library

• assets.media[] contains image, audio, and video assets keyed by assetId.
• assets.fonts[] contains font sources keyed by id and family.
• assets.paths[] contains reusable SVG path data.
• assets.spritesheets[] contains texture, frame, animation, and metadata definitions.
• assets.textures carries the texture manifest used by renderer-backed surfaces.

Object and graph ownership

• Name object IDs clearly so graph nodes, state machines, data bindings, and debug snapshots can be read without guessing.
• Keep unrelated visual responsibilities in separate objects when separate graph ownership improves inspection.
• Use render order, grouping, and object boundaries intentionally; do not hide behavior in page JavaScript.

Performance checks

• Batch repeated objects or procedural instances where possible.
• Check texture dimensions, particle counts, mesh density, and animation update cost at the largest expected viewport.
• Use fallback behavior for missing or delayed assets, especially near the first viewport.

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: Asset-backed scene sample with one image asset, one font asset, one object group, and texture stats captured after load.

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