fix: rotate drawCircleGradient boundary vertex per call

Two drawCircleGradient calls stacked at the same position would reveal a
faint vertical column where the top circle should have painted - the GPU
edge-tiebreaker rule (top-left rule or equivalent) appears to assign the
boundary line-degenerate triangle's (C, R_0) edge pixels to the
degenerate, which has zero area and produces no fragments. The adjacent
real fan slice doesn't own those pixels under the rule, so the column
goes unpainted and the lower draw shows through.

Rotate which rim vertex serves as the boundary by one slice per call.
The polygon has 32-fold rotational symmetry so the rendered shape is
visually identical, but consecutive calls now have their boundary
line-degens on different rim verts - the unpainted columns no longer
stack on the same pixel positions.

Partial mitigation only - the artifact can still appear in some
combinations because both circles' line-degens converge at the shared
center vertex.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: KilledByAPixel

dist/littlejs.d.ts

@@ -1845,16 +1845,7 @@ declare module "littlejsengine" {
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function drawCircle(pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
-    /** Draw a circle filled with a radial gradient from the center to the rim
-     *  @param {Vector2} pos
-     *  @param {number}  [size=1] - Diameter
-     *  @param {Color}   [colorInner=WHITE]
-     *  @param {Color}   [colorOuter=CLEAR_WHITE]
-     *  @param {boolean} [useWebGL=glEnable]
-     *  @param {boolean} [screenSpace]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
-     *  @memberof Draw */
-    export function drawCircleGradient(pos: Vector2, size?: number, colorInner?: Color, colorOuter?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawCircleGradient(pos: any, size: number, colorInner: Color, colorOuter: Color, useWebGL: boolean, screenSpace: boolean, context: any): void;
     /**
      * @callback Canvas2DDrawFunction - A function that draws to a 2D canvas context
      * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context

dist/littlejs.esm.js

@@ -4520,6 +4520,7 @@ function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useW
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
+let drawCircleGradientOffset = 0;
 function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHITE, useWebGL=glEnable, screenSpace=false, context)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -4538,17 +4539,21 @@ function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHIT
             pos = screenToWorld(pos);
             size /= cameraScale;
         }
-        // fan as tristrip; open and close on the rim so back-to-back
-        // gradients at the same position bridge as point-degenerates
-        // instead of leaking a spoke from center to top
+        // fan as tristrip; rotate the boundary vertex by one slice per call
+        // so back-to-back gradients at the same position have their hole
+        // (from gpu edge-rule on the boundary line-degen) at different rim
+        // verts and don't visibly stack
         const sides = glCircleSides;
         const radius = size/2;
         const innerInt = colorInner.rgbaInt();
         const outerInt = colorOuter.rgbaInt();
-        const points = [vec2(pos.x, pos.y + radius)], colors = [outerInt];
+        const offset = drawCircleGradientOffset++;
+        const startA = (offset%sides)/sides*PI*2;
+        const points = [vec2(pos.x + sin(startA)*radius, pos.y + cos(startA)*radius)];
+        const colors = [outerInt];
         for (let i=sides; i--;)
         {
-            const a = i/sides*PI*2;
+            const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
             colors.push(innerInt);
             points.push(vec2(pos.x + sin(a)*radius, pos.y + cos(a)*radius));

dist/littlejs.esm.min.js

@@ -4520,6 +4520,7 @@ function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useW
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
+let drawCircleGradientOffset = 0;
 function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHITE, useWebGL=glEnable, screenSpace=false, context)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -4538,17 +4539,21 @@ function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHIT
             pos = screenToWorld(pos);
             size /= cameraScale;
         }
-        // fan as tristrip; open and close on the rim so back-to-back
-        // gradients at the same position bridge as point-degenerates
-        // instead of leaking a spoke from center to top
+        // fan as tristrip; rotate the boundary vertex by one slice per call
+        // so back-to-back gradients at the same position have their hole
+        // (from gpu edge-rule on the boundary line-degen) at different rim
+        // verts and don't visibly stack
         const sides = glCircleSides;
         const radius = size/2;
         const innerInt = colorInner.rgbaInt();
         const outerInt = colorOuter.rgbaInt();
-        const points = [vec2(pos.x, pos.y + radius)], colors = [outerInt];
+        const offset = drawCircleGradientOffset++;
+        const startA = (offset%sides)/sides*PI*2;
+        const points = [vec2(pos.x + sin(startA)*radius, pos.y + cos(startA)*radius)];
+        const colors = [outerInt];
         for (let i=sides; i--;)
         {
-            const a = i/sides*PI*2;
+            const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
             colors.push(innerInt);
             points.push(vec2(pos.x + sin(a)*radius, pos.y + cos(a)*radius));

dist/littlejs.js

@@ -3840,6 +3840,7 @@ function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useW
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
+let drawCircleGradientOffset = 0;
 function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHITE, useWebGL=glEnable, screenSpace=false, context)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -3858,17 +3859,21 @@ function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHIT
             pos = screenToWorld(pos);
             size /= cameraScale;
         }
-        // fan as tristrip; open and close on the rim so back-to-back
-        // gradients at the same position bridge as point-degenerates
-        // instead of leaking a spoke from center to top
+        // fan as tristrip; rotate the boundary vertex by one slice per call
+        // so back-to-back gradients at the same position have their hole
+        // (from gpu edge-rule on the boundary line-degen) at different rim
+        // verts and don't visibly stack
         const sides = glCircleSides;
         const radius = size/2;
         const innerInt = colorInner.rgbaInt();
         const outerInt = colorOuter.rgbaInt();
-        const points = [vec2(pos.x, pos.y + radius)], colors = [outerInt];
+        const offset = drawCircleGradientOffset++;
+        const startA = (offset%sides)/sides*PI*2;
+        const points = [vec2(pos.x + sin(startA)*radius, pos.y + cos(startA)*radius)];
+        const colors = [outerInt];
         for (let i=sides; i--;)
         {
-            const a = i/sides*PI*2;
+            const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
             colors.push(innerInt);
             points.push(vec2(pos.x + sin(a)*radius, pos.y + cos(a)*radius));

dist/littlejs.min.js

@@ -736,6 +736,7 @@ function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useW
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
+let drawCircleGradientOffset = 0;
 function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHITE, useWebGL=glEnable, screenSpace=false, context)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -754,17 +755,21 @@ function drawCircleGradient(pos, size=1, colorInner=WHITE, colorOuter=CLEAR_WHIT
             pos = screenToWorld(pos);
             size /= cameraScale;
         }
-        // fan as tristrip; open and close on the rim so back-to-back
-        // gradients at the same position bridge as point-degenerates
-        // instead of leaking a spoke from center to top
+        // fan as tristrip; rotate the boundary vertex by one slice per call
+        // so back-to-back gradients at the same position have their hole
+        // (from gpu edge-rule on the boundary line-degen) at different rim
+        // verts and don't visibly stack
         const sides = glCircleSides;
         const radius = size/2;
         const innerInt = colorInner.rgbaInt();
         const outerInt = colorOuter.rgbaInt();
-        const points = [vec2(pos.x, pos.y + radius)], colors = [outerInt];
+        const offset = drawCircleGradientOffset++;
+        const startA = (offset%sides)/sides*PI*2;
+        const points = [vec2(pos.x + sin(startA)*radius, pos.y + cos(startA)*radius)];
+        const colors = [outerInt];
         for (let i=sides; i--;)
         {
-            const a = i/sides*PI*2;
+            const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
             colors.push(innerInt);
             points.push(vec2(pos.x + sin(a)*radius, pos.y + cos(a)*radius));