Procedural Canvas animation

Use this skill when a 2D bitmap canvas is the appropriate drawing surface for procedural motion. It covers authored particles, vector/noise fields, trails, weather, textures, generative geometry, and lightweight simulations for rendered media.

It does not cover Three.js scene graphs, WebGL/WebGPU shaders, D3 data semantics, game-engine architecture, or a generic frontend Canvas tutorial.

Evidence stance

• Documented fact: behavior from WHATWG, ECMAScript, p5.js, W3C, or cited API documentation.
• Production heuristic: a practical design or optimization choice to test in the target runtime.
• Empirical observation: a measured result from the actual animation, browser, frame output, or encoded delivery.

Facts were verified 2026-07-12. Canvas, browser, p5.js, OffscreenCanvas, and encoding behavior can change; pin versions and record the render environment.

Lock the canvas contract

Define: