Canvas interaction works best when raw input writes parameters and state machines decide which visual mode is active.

State machine shape

• CanvasStateMachine fields include id, name, optional skeletonId, parameters, states, transitions, initialState, layers, listeners, audio bindings, nested components, pointer alignment, keyboard listeners, data contexts, and data bindings.
• StateType supports animation, blend1d, blend2d, blendDirect, entry, exit, any, and empty.
• Transition conditions use parameterId, operator (==, !=, >, <, >=, <=, or fired), and optional value.

Input design

• Use root inputs or graph input nodes to write normalized pointer, scroll, time, distance, drag, keyboard, or data values.
• Keep smoothing separate from state changes so responsiveness and polish can be tuned independently.
• Use named states such as idle, focus, drag, selected, complete, or paused rather than hidden author-only labels.

Debug checks

• RuntimeLoadResult.getStateMachines() and getStateMachine(id) expose loaded state machines.
• FasterMotion.debug.nodes() and debug.dump() expose graph state around state-machine nodes.
• Test rapid repeated input, resize, asset delays, and route teardown.

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: Interactive Canvas card sample with idle, hover, drag, and selected states plus debug state readout.

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