From 5c00e48bdd81bc9e38a6f3d86749fb2c52b83250 Mon Sep 17 00:00:00 2001 From: b0txec Date: Sun, 23 Aug 2026 13:31:17 +0300 Subject: [PATCH] Fix temperature numbers sitting visually high on the map badges MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit canvas textBaseline "middle" centers on font em-box metrics, not visible ink — digits have no descenders, so they read as sitting too high in their boxes. Center on the actual glyph bounds instead, matching the technique already used correctly in Ūdens's drawRanges. Shared by Faktiskā and the older Kartes comparison map. --- web/src/components/map/canvasDraw.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) 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);