From 89c8567dcc0ee66ef5d9c5676ae2b47b6a438f0e Mon Sep 17 00:00:00 2001 From: Christian Gick Date: Sat, 4 Apr 2026 13:22:11 +0300 Subject: [PATCH] fix: two-pass render - all countries as single white fill first Canvas anti-aliasing creates semi-transparent edges between adjacent polygons. Pass 1 draws ALL countries in one beginPath/fill call as solid white - no seams possible. Pass 2 overdraws colored countries. Co-Authored-By: Claude Opus 4.6 (1M context) --- layouts/shortcodes/world-map.html | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html index 27b327d..d796e2a 100644 --- a/layouts/shortcodes/world-map.html +++ b/layouts/shortcodes/world-map.html @@ -110,11 +110,27 @@ if (!geoData) return; - // Draw country fills (no separate land fill — gaps show ocean, not white) + // Pass 1: draw ALL countries as white in a single path (eliminates inter-polygon seams) + ctx.fillStyle = '#ffffff'; + ctx.beginPath(); + geoData.features.forEach(function(f) { + var geom = f.geometry; + if (geom.type === 'Polygon') { + geom.coordinates.forEach(function(ring) { traceRing(ctx, ring, sx, sy); }); + } else if (geom.type === 'MultiPolygon') { + geom.coordinates.forEach(function(poly) { + poly.forEach(function(ring) { traceRing(ctx, ring, sx, sy); }); + }); + } + }); + ctx.fill('evenodd'); + + // Pass 2: overdraw colored countries only geoData.features.forEach(function(f) { var id = String(f.id).padStart(3, '0'); var c = byIsoNum[id]; - ctx.fillStyle = c ? STATUS_COLORS[c.status] : '#ffffff'; + if (!c) return; // skip no-data (already white) + ctx.fillStyle = STATUS_COLORS[c.status]; drawGeometry(ctx, f.geometry, sx, sy, true); });