Build an inspection map for case 62 with 47 mark records. Each record has an immutable ID, scene geometry, severity, and a short note. Render a bounded SVG overlay for actionable marks and a separate Canvas layer for a rapidly changing trace. Keep the data in the case model; neither SVG DOM nor Canvas pixels become the sole saved format. The companion list names every actionable region and uses the same selected ID as pointer input. Map pointer coordinates from the current CSS box into scene space, while backing pixels follow a capped device ratio. Resize and redraw without changing saved geometry. Load a private scan through an authorized route. Before offering an annotated bitmap download, prove the Canvas remains origin-clean; an unapproved image origin must leave structured marks intact and offer a permitted fallback. Derived exports have an owner, expiry, and private storage path. Check keyboard selection, focus, zoom, high contrast, and a graphic-disabled flow.
Project: accessible inspection map and export
Build contract
- Select overlapping region 29 through both SVG and text list with the same result.
- Resize from 620 to 310 CSS units and preserve scene coordinates.
- Fail bitmap export on an unapproved image origin without losing marks.
- Verify private export ownership, expiry, and account-switch cleanup.
Implementation checkpoint
function selectRegion(selectedFromGraphic, selectedFromList) {
return selectedFromGraphic === selectedFromList ? selectedFromGraphic : null;
}
console.log(selectRegion(29, 29));
// Output: 29Cost and boundaries
An SVG node per actionable region adds DOM and accessibility-tree work, while a Canvas trace spends redraw and bitmap memory. A naïve hit test scans O(n) regions per pointer event; measure actual density before indexing. A high-density backing surface can multiply allocation, and export creates another encoded copy. Bound surface area and inspect peak memory on target devices. An equivalent list adds nodes but keeps the task usable when the graphic cannot render or be operated.
Failure drill
Overlap two regions and prove draw order matches hit-test priority. Zoom and resize while one mark is selected; saved coordinates must not drift. Load a cross-origin image without export approval and catch the pixel-read failure. Keep the marks and explain the export path. Switch accounts and inspect decoded images and object URLs. Disable the graphic and use only the list to locate the high-severity seal split; every action must remain available.
Acceptance checks
- Structured marks survive image or export failure.
- Graphic and list share region identity and severity.
- Pointer mapping works after resize and zoom.
- Private derived files have an expiry path.
Common Mistakes
- Saving only the rendered bitmap.
- Multiplying pointer coordinates by pixel ratio twice.
- Calling a visible image exportable without checking origin-clean state.
Related lessons
SVG, Canvas, Scene Model, and Hit Testing; Canvas Pixel Ratio and Pointer Coordinates; Canvas Origin-Clean Export and Private Assets; Accessible Graphic Controls and Text Equivalents.