Canvas recording
Canvas recording is the capture of `<canvas>` element content in session recordings. Canvas pixels are drawn imperatively by JavaScript and never exist in the DOM, so mutation-based recording sees only an empty element; capturing what users saw requires dedicated strategies with real performance and storage costs.
How it works
Two approaches exist in rrweb. Snapshot-based recording (recordCanvas: true) serializes canvas contents as images at a sampled frame rate, appending them as canvas mutation events; fidelity and cost scale directly with resolution and FPS. Command-based recording, via the canvas plugins, records the drawing calls instead so replay re-executes them, which is compact for simple 2D drawing but complex for WebGL. For live use, the canvas WebRTC plugins stream canvas content in real time rather than storing it. Replaying stored canvas data requires the replayer's UNSAFE_replayCanvas option, named for the sandbox relaxation it implies. Canvas-heavy pages, such as design tools, maps, and games, should budget canvas capture deliberately rather than enabling it by default.
Where you encounter it
Whiteboards, editors, dashboards with canvas charts, and games; configuration requires an explicit choice about capture fidelity, storage cost, and replay safety.