Fix fog of war inversion when zoomed in too far

index.html

@@ -5148,8 +5148,11 @@
             fogCtx.fillRect(0, 0, width, height);
 
             // Helper function to draw a projected circle (handles rotation AND pitch)
+            // Returns true if circle was drawn, false if it covers entire canvas
             function drawProjectedCircle(ctx, centerLngLat, radiusMeters, numPoints = 48) {
+                const centerPoint = map.project(centerLngLat);
                 const points = [];
+
                 for (let i = 0; i < numPoints; i++) {
                     const angle = (i / numPoints) * 360;
                     const edgeLngLat = destinationPoint(centerLngLat, radiusMeters, angle);
@@ -5157,6 +5160,24 @@
                     points.push(edgePoint);
                 }
 
+                // Check if the circle is larger than the canvas (zoomed in too far)
+                // Calculate approximate radius in pixels
+                const firstPoint = points[0];
+                const radiusPixels = Math.hypot(firstPoint.x - centerPoint.x, firstPoint.y - centerPoint.y);
+                const canvasDiagonal = Math.hypot(width, height);
+
+                // If radius is larger than canvas diagonal and center is on screen,
+                // the entire visible area is revealed
+                if (radiusPixels > canvasDiagonal &&
+                    centerPoint.x > -radiusPixels && centerPoint.x < width + radiusPixels &&
+                    centerPoint.y > -radiusPixels && centerPoint.y < height + radiusPixels) {
+                    // Draw a rectangle covering the entire canvas instead
+                    ctx.beginPath();
+                    ctx.rect(0, 0, width, height);
+                    ctx.closePath();
+                    return false;  // Indicates full canvas clear
+                }
+
                 // Draw the projected shape
                 ctx.beginPath();
                 points.forEach((pt, i) => {
@@ -5164,6 +5185,7 @@
                     else ctx.lineTo(pt.x, pt.y);
                 });
                 ctx.closePath();
+                return true;
             }
 
             // Homebase reveal (only if homebase exists)