Skip to main content
cngx-src documentation

createCanvasRenderer

Functioncommon/chart/rendererv0.1.0

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.

Signature#

createCanvasRenderer(deps: ChartRendererDeps)

Parameters#

Returns#

CngxChartRenderer