Fix ghosting: opaque per-frame sky clear (back-port hub fix to source)

8c90edb0fe9a729fd0fb7f8a52efc34053d325d5 · 2026-07-24 18:50:02 -0700 · Steve

Files touched

M index.html

Diff

commit 8c90edb0fe9a729fd0fb7f8a52efc34053d325d5
Author: Steve <steve@designerwallcoverings.com>
Date:   Fri Jul 24 18:50:02 2026 -0700

    Fix ghosting: opaque per-frame sky clear (back-port hub fix to source)
---
 index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index b92f2c2..3350124 100644
--- a/index.html
+++ b/index.html
@@ -607,9 +607,14 @@
 
   // ---- rendering ------------------------------------------------------
   function drawBackground() {
-    const grd = ctx.createLinearGradient(0, 0, 0, H);
-    grd.addColorStop(0, "rgba(40,50,90,0.25)");
-    grd.addColorStop(1, "rgba(0,0,0,0.55)");
+    // Opaque full-frame sky. This is also the per-frame CLEAR — the canvas is
+    // created with { alpha: false }, so the CSS background never shows through
+    // and a translucent fill here would let every prior frame ghost through
+    // (the bird/pipes/particles smeared into a trail). Paint the sky solid.
+    const grd = ctx.createRadialGradient(W * 0.2, H * 0.2, 0, W * 0.2, H * 0.2, Math.max(W, H));
+    grd.addColorStop(0, "#586df2");
+    grd.addColorStop(0.4, "#243046");
+    grd.addColorStop(1, "#0e1018");
     ctx.fillStyle = grd;
     ctx.fillRect(0, 0, W, H);

← 4e26357 Flappy Sky — polished single-file Flappy clone built from GP · back to Flappy Sky · cap playfield to centered portrait column (source-of-truth f 53a3d8a →