canvas2d-data-visualization

Use Canvas2D with batched draw calls, typed-array geometry, off-screen culling, and data decimation when the viewport cannot resolve individual points. Keep a retained scene model and redraw only invalidated layers instead of the full scene.

Choose Canvas2D when the chart has tens of thousands of marks, continuous updates, or many repeated instances where SVG node count dominates layout and memory. Prefer SVG when the chart is small, text-heavy, accessibility-driven, or needs editable vector export.

Canvas pixels carry no semantics, so maintain a retained scene model and hit test with analytic geometry, spatial indexes, Path2D replay via isPointInPath, or a color-picking buffer. Use setPointerCapture for drags and clean up on pointercancel and lostpointercapture.

Blurriness happens when the backing store does not match CSS size times devicePixelRatio, which changes with page zoom. Set canvas.width and canvas.height to cssSize times pixelRatio, reset the context with setTransform, and redraw on DPR changes.

Move to WebGL when the visualization needs GPU picking, custom shaders, instancing, very large particle or point layers, true 3D, or high-volume geospatial overlays. Canvas2D is simpler and often faster for flat immediate-mode workloads without shader setup.

Use one shared Canvas over a virtualized table viewport, pooled Canvas elements, or pre-rendered bitmaps instead of one Canvas per row. Compute backing-store memory as width times height times pixelRatio squared times 4 times layer and instance counts.