Canvas Animation Performance

Overview

A canvas animation that runs while it is off-screen is just a heater. The same applies to tabs in the background and to users who have asked the browser to reduce motion. Treat canvas like any other expensive resource.

Highlights

• Pause the rAF loop when the canvas leaves the viewport via Intersection Observer
• Batch state updates inside the rAF callback — never inside event handlers
• Bail out entirely when prefers-reduced-motion: reduce is set