Capture & annotation

web

The three-gesture flow: capture the screen, draw on it, send. The editor runs entirely in the tester's browser — blurred pixels never leave the page.

The flow

  1. The tester clicks the Tracebird button → the report panel opens (type, comment, context summary).
  2. Capture & annotate this screen rasterizes the current viewport — the widget excludes itself from the image — and opens a full-screen editor.
  3. Done returns to the panel with an annotated thumbnail (redo restarts the capture); Cancel just comes back. The comment draft survives the round-trip.

The capture is optional — a report sent without one still carries the full technical context, including the DOM snapshot.

Editor tools

  • Brush (default) — freehand stroke, smoothed. Circle the broken thing the way you would on paper.
  • Arrow — point at it.
  • Rect — frame a region.
  • Blur — pixelates a region of the image before anything is sent. Use it on names, amounts, anything personal.

Four colors, unlimited undo. Annotations are stored vectorially (typed shapes with coordinates) alongside a flattened JPEG — so a future editor can reopen and modify them.

noteThe blur is applied to the raster in the browser. What was under the blur is not recoverable from the uploaded image — the pixels are gone before the request leaves the page.

Fidelity notes

Viewport rasterization handles most real apps. Cross-origin iframes and some exotic CSS (heavy gradient stacks, WebGL) may degrade — that's why every report also ships a DOM snapshot, which rebuilds the exact markup and styles in the dashboard, sharp at any zoom.