Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

SVG, Canvas, Scene Model, and Hit Testing

Last updated: 4 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

SVG retains elements in a document tree; Canvas draws pixels into a bitmap whose shapes are not separately remembered by the browser. That distinction determines how you update, focus, and hit-test an inspection map. SVG suits a bounded set of meaningful regions that need individual labels and controls. Canvas can suit a large, rapidly changing scene, but the application must own the scene graph, drawing order, hit testing, and text equivalent. Neither medium is a data model. Store marks as structured records outside the rendering layer.

Working case

Reviewer 29 opens case 62 with 47 annotated defect regions. Each region has an ID, severity, description, and geometry. At this density, the team renders an SVG overlay whose region controls can receive focus and expose meaningful names. A live sensor trace behind it redraws many times per second on a separate Canvas. Clicking either view selects a region ID in the case model. The saved record contains geometry and a note, not a screenshot of the overlay. When the sensor trace is unavailable, the region list still describes every action.

Implementation boundary

javascript
function topRegionAt(regions, point) {
  return regions.slice().reverse().find(region => point.x >= region.left && point.x <= region.right && point.y >= region.top && point.y <= region.bottom)?.id ?? null;
}
console.log(topRegionAt([{ id: 29, left: 0, right: 47, top: 0, bottom: 62 }], { x: 12, y: 18 }));
// Output: 29

Count interactive shapes, update frequency, and labeling needs before choosing a renderer. Keep coordinates in an explicit world space and map to the rendered viewport. For SVG, delegate events to named region IDs and provide keyboard paths; avoid one event closure per sensor sample. For Canvas, maintain spatial data and a hit-test rule separate from paint code. Draw order must match hit-test priority when shapes overlap. Use the same source record for graphic labels and a text list so an accessibility path cannot drift from the visible scene. Do not serialize DOM or pixels as the only saved state.

Cost and boundaries

A large SVG scene can incur DOM, style, and accessibility-tree cost per shape; a Canvas scene can shift work to redrawing and custom hit testing. A naïve Canvas hit test scans O(n) shapes for each pointer event, while a spatial index may reduce repeated queries at an update cost. Either approach can be correct for dozens of regions. Benchmark realistic data on the intended device before adding an index or a GPU path. Track input delay, redraw time, memory, and keyboard reachability together.

Failure trace

A Canvas prototype draws a region that cannot be selected by keyboard or described to a screen reader. Another SVG build attaches 47 separate listeners but forgets that a mark can overlap another; pointer and keyboard paths select different records. Test empty scene, overlapping geometry, hidden region, zoom, rapid updates, and a large import. Verify the selected ID and accessible description match regardless of whether a user clicks the graphic or chooses the text list.

Verification

  • Graphic and text list select the same region IDs.
  • Overlap priority matches visual order.
  • Saved state is structured, not only a bitmap.

Practice drill

Represent 47 regions as immutable IDs and geometry in a scene array. Render one SVG overlay and one text list from that array. Select the overlapping region 29 through both paths and compare the resulting case ID. Replace the overlay with a Canvas renderer while preserving the same selection contract. Measure redraw and hit-test time for 47 and 620 regions, then decide whether the extra renderer complexity is justified.

Decision note

Select the rendering medium from measured scene density, while the domain model owns identity and meaning.

Common Mistakes

  • Assuming Canvas remembers drawn objects.
  • Rendering a graphic without an equivalent control path.
  • Building a spatial index before measuring actual density.

Connected lessons

Build Project: accessible inspection map and export and review Web Development: graphics and editor decisions quiz; follow Interactive Graphics and Canvas Boundaries; Canvas Pixel Ratio and Pointer Coordinates; Canvas Origin-Clean Export and Private Assets; Accessible Graphic Controls and Text Equivalents; Chart and Diagram Text Equivalents; Accessible forms: connect labels, errors, and focus.

web-tech
web-development
Storage details