diff --git a/web/src/components/map/canvasDraw.ts b/web/src/components/map/canvasDraw.ts index cb945b8..4b7961d 100644 --- a/web/src/components/map/canvasDraw.ts +++ b/web/src/components/map/canvasDraw.ts @@ -47,11 +47,16 @@ export function drawOnMap( ctx.font = `bold ${props.fontSize}px Monda`; ctx.textAlign = "center"; - ctx.textBaseline = "middle"; + ctx.textBaseline = "alphabetic"; ctx.fillStyle = "#000000"; const numericValue = roundValues ? Math.round(value) : value.toFixed(1); const stringValue = numericValue.toString().replace(".", ","); - ctx.fillText(stringValue, localX, localY); + // "middle" baseline centers on font em-box metrics, not visible ink — + // digits have no descenders, so that reads as sitting too high. Center + // on the actual glyph bounds instead, matching Ūdens's drawRanges. + const metrics = ctx.measureText(stringValue); + const drawY = localY + (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2; + ctx.fillText(stringValue, localX, drawY); if (icon) { const iconImage = getLoadedWeatherIcon(icon);