From cd47d400c2826663b2e298365a621a975564037f Mon Sep 17 00:00:00 2001
From: Anton Lavrevov <lavrton@gmail.com>
Date: Fri, 21 Nov 2025 12:29:09 -0500
Subject: [PATCH] Better canvas farbling detection logic

---
 src/Util.ts       | 30 ++++++++++++++++++++++--------
 test/sandbox.html |  9 +++++++++
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/Util.ts b/src/Util.ts
index f2a774e5..4585635e 100644
--- a/src/Util.ts
+++ b/src/Util.ts
@@ -603,17 +603,31 @@ export const Util = {
     }
 
     const c = this.createCanvasElement();
-    c.width = 1;
-    c.height = 1;
+    c.width = 10;
+    c.height = 10;
     const ctx = c.getContext('2d', {
       willReadFrequently: true,
     }) as CanvasRenderingContext2D;
-    ctx.clearRect(0, 0, 1, 1);
-    ctx.fillStyle = 'rgba(255,0,255,1)'; // clear #FF00FF, no alpha
-    ctx.fillRect(0, 0, 1, 1);
-    const d = ctx.getImageData(0, 0, 1, 1).data;
-    const exact = d[0] === 255 && d[1] === 0 && d[2] === 255 && d[3] === 255;
-    _isCanvasFarblingActive = !exact;
+    ctx.clearRect(0, 0, 10, 10);
+
+    ctx.fillStyle = '#282828'; // 40, 40, 40
+    ctx.fillRect(0, 0, 10, 10);
+
+    const d = ctx.getImageData(0, 0, 10, 10).data;
+    let isFarbling = false;
+    for (let i = 0; i < 100; i++) {
+      if (
+        d[i * 4] !== 40 ||
+        d[i * 4 + 1] !== 40 ||
+        d[i * 4 + 2] !== 40 ||
+        d[i * 4 + 3] !== 255
+      ) {
+        isFarbling = true;
+        break;
+      }
+    }
+
+    _isCanvasFarblingActive = isFarbling;
     this.releaseCanvas(c);
     return _isCanvasFarblingActive;
   },
diff --git a/test/sandbox.html b/test/sandbox.html
index 77fc4b25..61b7d95d 100644
--- a/test/sandbox.html
+++ b/test/sandbox.html
@@ -31,6 +31,15 @@
       const layer = new Konva.Layer();
       stage.add(layer);
 
+      // const circle = new Konva.Circle({
+      //   x: 100,
+      //   y: 100,
+      //   radius: 10,
+      //   fill: 'red',
+      // });
+      // layer.add(circle);
+      // throw new Error('test');
+
       // Given gridRows and gridCols, compute maximum possible radius and position circles
       const gridRows = 200;
       const gridCols = 200;