Pixel Perfect Rendering
To display visual elements crisp and sharp, the chart canvas aligns drawings to integer grid bounds. Sub-pixel positions trigger browser anti-aliasing, leading to blurry, double-wide lines.
The 0.5px Offset Rule
HTML5 Canvas coordinate grid positions the integer coordinates (e.g. 10.0, 11.0) on the boundary between physical pixels. Therefore, drawing a 1-pixel wide line centered at an integer position forces the browser to paint half a pixel on each side.
To prevent this blurring:
- Odd Width Lines (e.g. 1px, 3px): Draw them at half-pixel offsets:
Math.floor(x) + 0.5. - Even Width Lines (e.g. 2px, 4px): Draw them at exact integer boundaries:
Math.round(x).
DPI and DevicePixelRatio (Retina Support)
High-DPI monitors use multiple physical screen pixels to represent a single CSS pixel. The charting engine scales the canvas internally by window.devicePixelRatio.
This means coordinates passed to custom renderers must be scaled correctly to align precisely with high-density physical screen grids.