From 9191bb57764de5649d625fc82d6e80aa08aae56a Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 08:32:10 +0200 Subject: [PATCH] Swap textAlign so labels extend into tile, not off-edge User feedback: text on the left edge ('left' align) was getting cut off because the text extended to negative X (off the left edge of the canvas). Same problem on the right. Fix: swap the textAlign so each side's text extends INTO the tile, not OFF the edge: - Left-side labels (S, N) now use textAlign 'right'. Anchor at the left edge of the tile area; the text's right edge is at the anchor and it extends rightward into the tile. - Right-side labels (y, x) use textAlign 'left'. Anchor at the right edge; the text's left edge is at the anchor and extends leftward into the tile. Mirror (scale -1, 1) is still applied so the text content is flipped. --- vendor/clouds3d.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index 1e782af..0fe0d6f 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -379,16 +379,19 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { groundCtx.fillText(text, 0, 0); groundCtx.restore(); } - // S at top-left (image south after Y mirror is at canvas top) - mirrorLabel('S', canvasX + 12, canvasY + 44, 'left'); - // N at bottom-left (image north at canvas bottom) - mirrorLabel('N', canvasX + 12, canvasY + 244, 'left'); + // S at top-left, textAlign 'right' so the text's right edge + // is at the anchor (text extends into the tile from the left + // edge of the tile area). + mirrorLabel('S', canvasX + 12, canvasY + 44, 'right'); + // N at bottom-left + mirrorLabel('N', canvasX + 12, canvasY + 244, 'right'); // Tile coordinates, top-right and bottom-right corners groundCtx.font = 'bold 18px monospace'; - // y at top-right - mirrorLabel('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28, 'right'); + // y at top-right, textAlign 'left' so text extends into the + // tile from the right edge. + mirrorLabel('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28, 'left'); // x at bottom-right - mirrorLabel('x=' + tileX, canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12, 'right'); + mirrorLabel('x=' + tileX, canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12, 'left'); return true; }).catch(function() {