fix(renderer): align font metrics to device pixel boundaries to prevent seams

[tommyme]

Problem

When devicePixelRatio is non-integer (e.g. 1.25, 1.5, 1.75 from browser zoom or high-DPI displays), rounding cell width/height to the nearest CSS pixel with Math.ceil() produces fractional physical pixel coordinates at cell edges.

The canvas rasterizer antialiases clearRect/fillRect calls at those sub-pixel boundaries. With alpha: true on the canvas, the resulting partially-transparent edge pixels composite against the page background and appear as thin black seams between rows and columns.

Fix

Round up to the nearest device pixel instead of CSS pixel:

const dpr = this.devicePixelRatio;
const width    = Math.ceil(widthMetrics.width       * dpr) / dpr;
const height   = Math.ceil((ascent + descent + 2)  * dpr) / dpr;
const baseline = Math.ceil((ascent + 1)            * dpr) / dpr;

This guarantees cell boundaries always fall on exact physical pixel boundaries regardless of zoom level or monitor DPR.

🤖 Generated with Claude Code