createCanvasRenderer
projects/common/chart/renderer/canvas-renderer.ts
Description#
Canvas rendering backend. Mounts a <canvas> absolutely positioned
over the chart's SVG frame and paints each LayerGeometry onto
its 2D context: Path2D stroke/fill for line/area, per-mark loops for
bar/scatter, moveTo/lineTo for threshold, fillRect for band.
Colors resolve through a closure-local cache: the first paint() reads
each CSS custom property once via getComputedStyle(host); subsequent
paints hit the cache, so the paint hot path performs zero synchronous
DOM reads. CngxChartRenderer.invalidateColorCache clears it -
the renderer controller calls it on a dimensions() change (a proxy
for layout / theming reflow). It never writes the chart context's
renderSvg gate; the shell owns that.
The plot inset needs no handling here. Every geometry this backend
paints was derived from ctx.xScale() / ctx.yScale(), whose ranges
are already the inset plot area, so canvas marks land exactly where
SVG marks would without the renderer knowing an inset exists. Axis
decoration never reaches this file at all: there is no axis branch in
KIND_VARS and no text call anywhere in the backend, because
CngxAxis renders its own SVG ungated by renderSvg in both modes.
The two paths therefore cannot disagree on where the plot area is,
and only one of them ever draws an axis.
They do differ on what happens past the box edge: a canvas clips
natively at the element bounds, and since the SVG root no longer sets
overflow: visible it now clips there too. Out-of-domain data is cut
off on both paths.