Canvas
Regression Reel

Visual test instrument · v0.1

Find the first frame that changed.

Replay the same browser-game inputs, compare only the canvas, and leave CI with a short reel of visual evidence—not a screenshot pile.

Install the recorder Try the live comparison
  • Seeded
  • Tolerant
  • Local only
A cream mid-century test instrument showing three sequential platform-game frames
One run. Three checkpoints. The signal lamp marks the first divergence.

Live comparator / no upload

Turn one drawing fault into useful evidence.

This miniature seeded run is rendered in your browser. Introduce a regression, move through the reel, and inspect exactly which pixels depart.

Run statusWithin tolerance
Changed pixels0.000%
First divergenceNone
BaselineApproved
CurrentMatched
DifferenceQuiet

Checkpoint Spawn: the baseline and current frame match; no changed pixels exceed a delta of 24.

Seed release-42Viewport 960 × 540Mask HUD 120 × 44Ready offline

The shortest path to certainty

Record. Replay. Read the signal.

  1. 01

    Describe the run

    Name the canvas, seed, inputs, checkpoints, masks, and honest tolerance in one typed config.

  2. 02

    Replay in Chromium

    The runner seeds before game code loads, applies exact inputs, and captures canvas pixels only.

  3. 03

    Review one reel

    CI points to the first changed checkpoint. Baseline, current, and diff travel together in one HTML file.

One config / one artifact

Small enough to understand before you trust it.

The API stays deliberately narrow. No account, daemon, cloud test farm, or hidden threshold. Masked areas are excluded from comparison and redacted in the report.

Pass
Exit 0
Visual change
Exit 1
Config error
Exit 2
reel.config.mjs
import { defineConfig } from 'canvas-regression-reel'

export default defineConfig({
  url: 'http://127.0.0.1:4173',
  canvas: '#game',
  seed: 'release-42',
  tolerance: {
    pixelDelta: 24,
    changedPixelRatio: 0.001
  },
  checkpoints: [
    { name: 'spawn' },
    { name: 'jump-apex', actions: [
      { type: 'key', key: ' ', action: 'press' },
      { type: 'wait', ms: 280 }
    ] }
  ]
})

Then run npx canvas-reel run --update.

Keep the release switch boring

Visual proof in under two minutes.

Free, open source, and designed for local or CI use.

View npm package