update cdn link

CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.0.12 (2025-11-21)
+
+- Better canvas farbling detection logic
+
+## 10.0.11 (2025-11-20)
+
+- Fixed broken release
+
+## 10.0.10 (2025-11-20)
+
+- Update hit detection system to handle canvas farbling. Hit detection should work better on Brave browser. Thanks [@wiverson](https://github.com/wiverson) to the idea and implementation idea.
+
+## 10.0.9 (2025-11-08)
+
+- Fixed line-through rendering when letter spacing is used
+
+## 10.0.8 (2025-10-24)
+
+- Fixed opacity level when a cached shape has opacity, fill and stroke
+
+## 10.0.7 (2025-10-22)
+
+- Fixed image element size re-calculation when change is changed with transformer is used.
+
+## 10.0.6 (2025-10-22)
+
+- Better `Image.getClientRect()` calculation if an instance has no image attached yet
+
 ## 10.0.5 (2025-10-22)
 
 - Simplify types to fix TS errors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "10.0.5",
+  "version": "10.0.12",
   "description": "HTML5 2d canvas library.",
   "author": "Anton Lavrenov",
   "type": "module",

src/Canvas.ts

@@ -182,42 +182,6 @@ export class SceneCanvas extends Canvas {
   }
 }
 
-// function checks if canvas farbling is active
-// canvas farbling is a Browser security feature, it break konva internals
-function isCanvasFarblingActive() {
-  const c = Util.createCanvasElement();
-  c.width = 1;
-  c.height = 1;
-  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;
-  return !exact;
-}
-
-function isBraveBrowser() {
-  if (typeof navigator === 'undefined') {
-    return false;
-  }
-  // @ts-ignore
-  return navigator.brave?.isBrave() ?? false;
-}
-
-let warned = false;
-function checkHitCanvasSupport() {
-  if (isBraveBrowser() && isCanvasFarblingActive() && !warned) {
-    warned = true;
-    Util.error(
-      'Looks like you have "Brave shield" enabled in your browser. It breaks KonvaJS internals. Please disable it. You may need to ask your users to do the same.'
-    );
-  }
-  return isBraveBrowser() && isCanvasFarblingActive();
-}
-
 export class HitCanvas extends Canvas {
   hitCanvas = true;
   constructor(config: ICanvasConfig = { width: 0, height: 0 }) {
@@ -225,6 +189,5 @@ export class HitCanvas extends Canvas {
 
     this.context = new HitContext(this);
     this.setSize(config.width, config.height);
-    checkHitCanvasSupport();
   }
 }

src/Layer.ts

@@ -367,9 +367,10 @@ export class Layer extends Container<Group | Shape> {
     const p3 = p[3];
 
     // fully opaque pixel
+
     if (p3 === 255) {
-      const colorKey = Util._rgbToHex(p[0], p[1], p[2]);
-      const shape = shapes[HASH + colorKey];
+      const colorKey = Util.getHitColorKey(p[0], p[1], p[2]);
+      const shape = shapes[colorKey];
       if (shape) {
         return {
           shape: shape,

src/Shape.ts

@@ -203,12 +203,21 @@ export class Shape<
     super(config);
     // set colorKey
     let key: string;
+    let attempts = 0;
 
     while (true) {
-      key = Util.getRandomColor();
+      key = Util.getHitColor();
       if (key && !(key in shapes)) {
         break;
       }
+      attempts++;
+      if (attempts >= 10000) {
+        Util.warn(
+          'Failed to find a unique color key for a shape. Konva may work incorrectly. Most likely your browser is using canvas farbling. Consider disabling it.'
+        );
+        key = Util.getRandomColor();
+        break;
+      }
     }
 
     this.colorKey = key;
@@ -658,8 +667,13 @@ export class Shape<
       if (hasShadow) {
         context._applyShadow(this);
       }
-      context._applyOpacity(this);
-      context._applyGlobalCompositeOperation(this);
+      // if we are caching self, we don't need to apply opacity and global composite operation
+      // because it will be applied in the cache
+      if (!cachingSelf) {
+        context._applyOpacity(this);
+        context._applyGlobalCompositeOperation(this);
+      }
+
       context.drawImage(
         bc._canvas,
         bc.x || 0,

src/Util.ts

@@ -446,6 +446,9 @@ const OBJECT_ARRAY = '[object Array]',
   RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
 let animQueue: Array<Function> = [];
 
+// Cache for canvas farbling detection
+let _isCanvasFarblingActive: boolean | null = null;
+
 const req =
   (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) ||
   function (f) {
@@ -583,6 +586,98 @@ export const Util = {
     }
     return HASH + randColor;
   },
+  /**
+   * Check if canvas farbling is active (e.g., Brave browser fingerprinting protection)
+   * @method
+   * @memberof Konva.Util
+   * @returns {Boolean}
+   */
+  isCanvasFarblingActive() {
+    if (_isCanvasFarblingActive !== null) {
+      return _isCanvasFarblingActive;
+    }
+
+    if (typeof document === 'undefined') {
+      _isCanvasFarblingActive = false;
+      return false;
+    }
+
+    const c = this.createCanvasElement();
+    c.width = 10;
+    c.height = 10;
+    const ctx = c.getContext('2d', {
+      willReadFrequently: true,
+    }) as CanvasRenderingContext2D;
+    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;
+  },
+  /**
+   * Get a random color for hit detection (normalized if farbling is active)
+   * @method
+   * @memberof Konva.Util
+   * @returns {String} hex color string
+   */
+  getHitColor(): string {
+    const color = this.getRandomColor();
+    return this.isCanvasFarblingActive()
+      ? this.getSnappedHexColor(color)
+      : color;
+  },
+  /**
+   * Get hit color key from RGB values (normalized if farbling is active)
+   * @method
+   * @memberof Konva.Util
+   * @param {Number} r - red component (0-255)
+   * @param {Number} g - green component (0-255)
+   * @param {Number} b - blue component (0-255)
+   * @returns {String} hex color key string
+   */
+  getHitColorKey(r: number, g: number, b: number): string {
+    if (this.isCanvasFarblingActive()) {
+      r = Math.round(r / 5) * 5;
+      g = Math.round(g / 5) * 5;
+      b = Math.round(b / 5) * 5;
+    }
+    return HASH + this._rgbToHex(r, g, b);
+  },
+  /**
+   * Snap hex color values to end with 0 (normalize for canvas farbling)
+   * @method
+   * @memberof Konva.Util
+   * @param {String} hex - hex color string (e.g., "#ff00ff")
+   * @returns {String} normalized hex color string
+   */
+  getSnappedHexColor(hex: string): string {
+    const rgb = this._hexToRgb(hex);
+    return (
+      HASH +
+      this._rgbToHex(
+        Math.round(rgb.r / 5) * 5,
+        Math.round(rgb.g / 5) * 5,
+        Math.round(rgb.b / 5) * 5
+      )
+    );
+  },
 
   /**
    * get RGB components of a color
@@ -1122,4 +1217,4 @@ export const Util = {
   },
 };
 
-export type AnyString<T> = T | (string & {})
+export type AnyString<T> = T | (string & {});

src/shapes/Image.ts

@@ -43,7 +43,7 @@ export interface ImageConfig extends ShapeConfig {
 export class Image extends Shape<ImageConfig> {
   private _loadListener: () => void;
 
-  constructor(attrs: ImageConfig) {
+  constructor(attrs?: ImageConfig) {
     super(attrs);
     this._loadListener = () => {
       this._requestDraw();
@@ -147,10 +147,10 @@ export class Image extends Shape<ImageConfig> {
     context.fillStrokeShape(this);
   }
   getWidth() {
-    return this.attrs.width ?? (this.image() as any)?.width;
+    return this.attrs.width ?? (this.image() as any)?.width ?? 0;
   }
   getHeight() {
-    return this.attrs.height ?? (this.image() as any)?.height;
+    return this.attrs.height ?? (this.image() as any)?.height ?? 0;
   }
 
   /**
@@ -193,6 +193,7 @@ export class Image extends Shape<ImageConfig> {
 }
 
 Image.prototype.className = 'Image';
+Image.prototype._attrsAffectingSize = ['image'];
 _registerNode(Image);
 
 /**

src/shapes/RegularPolygon.ts

@@ -74,8 +74,8 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
     const points = this._getPoints();
 
     let minX = points[0].x;
-    let maxX = points[0].y;
-    let minY = points[0].x;
+    let maxX = points[0].x;
+    let minY = points[0].y;
     let maxY = points[0].y;
     points.forEach((point) => {
       minX = Math.min(minX, point.x);

src/shapes/Text.ts

@@ -318,7 +318,9 @@ export class Text extends Shape<TextConfig> {
         context.stroke();
         context.restore();
       }
-      // draw line-through above the text content
+
+      // store the starting x position for line-through which is drawn after text
+      const lineThroughStartX = lineTranslateX;
 
       // As `letterSpacing` isn't supported on Safari, we use this polyfill.
       // The exception is for RTL text, which we rely on native as it cannot
@@ -380,6 +382,7 @@ export class Text extends Shape<TextConfig> {
 
         context.fillStrokeShape(this);
       }
+
       // draw line-through above the text content
       if (shouldLineThrough) {
         context.save();
@@ -387,7 +390,7 @@ export class Text extends Shape<TextConfig> {
         const yOffset = !Konva.legacyTextRendering
           ? -Math.round(fontSize / 4)
           : 0;
-        const x = align === JUSTIFY ? 0 : lineTranslateX;
+        const x = lineThroughStartX;
         context.moveTo(x, translateY + lineTranslateY + yOffset);
         const lineWidth =
           align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
@@ -402,6 +405,7 @@ export class Text extends Shape<TextConfig> {
         context.stroke();
         context.restore();
       }
+
       context.restore();
       if (textArrLen > 1) {
         translateY += lineHeightPx;

test/sandbox.html

@@ -31,14 +31,71 @@
       const layer = new Konva.Layer();
       stage.add(layer);
 
-      const circle = new Konva.Circle({
-        x: stage.width() / 2,
-        y: stage.height() / 2,
-        radius: 100,
-        fill: 'red',
-        draggable: true,
-      });
-      layer.add(circle);
+      // 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;
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+
+      // Calculate spacing and radius so circles fit entire window
+      // There are (gridCols - 1) spaces between centers horizontally, and (gridRows - 1) vertically
+      // The available width is "width", so (gridCols) circles and (gridCols-1) spaces between
+      // The diameter must fit: gridCols * diameter + (gridCols - 1) * gap <= width
+      // But to maximize, gap should equal to at least 0, so best layout is circles tangent
+
+      // So the max diameter horizontally is width / gridCols
+      // Likewise for vertical
+      const cellWidth = width / gridCols;
+      const cellHeight = height / gridRows;
+      const radius = Math.min(cellWidth, cellHeight) / 2;
+
+      const circles = [];
+
+      // Create grid of circles - centers in each cell's center
+      for (let row = 0; row < gridRows; row++) {
+        for (let col = 0; col < gridCols; col++) {
+          const cx = cellWidth * col + cellWidth / 2;
+          const cy = cellHeight * row + cellHeight / 2;
+          const c = new Konva.Circle({
+            x: cx,
+            y: cy,
+            radius: radius,
+            fill: Konva.Util.getRandomColor(),
+            id: `circle-${row}-${col}`,
+          });
+          circles.push({
+            node: c,
+            x: cx,
+            y: cy,
+            row,
+            col,
+          });
+          layer.add(c);
+        }
+      }
+      layer.draw();
+
+      // Test hits at each center
+      for (const cInfo of circles) {
+        const { node, x, y } = cInfo;
+        const hit = stage.getIntersection({ x, y });
+        if (hit !== node) {
+          const gotId = hit ? hit.id && hit.id() : null;
+          console.error(
+            `Hit test failed at (${x},${y}): expected id=${node.id()}, got id=${gotId}`
+          );
+        }
+      }
+      console.log('Hit test grid check complete.');
     </script>
   </body>
 </html>

test/unit/Image-test.ts

@@ -396,6 +396,16 @@ describe('Image', function () {
     });
   });
 
+  it('test image client rect without image object attached', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+    var image = new Konva.Image();
+    layer.add(image);
+    assert.equal(image.getClientRect().width, 0);
+    assert.equal(image.getClientRect().height, 0);
+  });
+
   it('corner radius with shadow', function (done) {
     // that will trigger buffer canvas
     loadImage('darth-vader.jpg', (imageObj) => {

test/unit/Node-cache-test.ts

@@ -136,6 +136,7 @@ describe('Caching', function () {
     var stage = addStage();
 
     var layer = new Konva.Layer();
+    stage.add(layer);
 
     var rect = new Konva.Rect({
       x: 100,
@@ -147,13 +148,13 @@ describe('Caching', function () {
       stroke: 'black',
       strokeWidth: 10,
     });
-    rect.cache();
-    rect.opacity(0.3);
 
     layer.add(rect);
-    stage.add(layer);
+    rect.cache();
+    layer.draw();
 
-    cloneAndCompareLayer(layer, 100);
+    // important to NOT use tollerance, because opacity is sensative
+    cloneAndCompareLayer(layer, 1);
   });
 
   // skip, because opacity rendering of cached shape is different

test/unit/Text-test.ts

@@ -1966,4 +1966,41 @@ describe('Text', function () {
       );
     }
   });
+
+  it('text decoration with letterSpacing and lineHeight', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'hello\nworld',
+      fontSize: 40,
+      fill: 'red',
+      letterSpacing: 5,
+      lineHeight: 2,
+      textDecoration: 'underline line-through',
+    });
+
+    layer.add(text);
+    stage.add(layer);
+
+    var trace = layer.getContext().getTrace(false, true);
+    if (Konva._renderBackend === 'web') {
+      assert.equal(
+        trace,
+        'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 40px Arial;textBaseline=alphabetic;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,64);lineTo(110,64);stroke();restore();fillStyle=red;fillText(h,0,54);fillStyle=red;fillText(e,27,54);fillStyle=red;fillText(l,54,54);fillStyle=red;fillText(l,68,54);fillStyle=red;fillText(o,82,54);save();beginPath();moveTo(0,44);lineTo(110,44);stroke();restore();restore();save();save();beginPath();moveTo(0,144);lineTo(121,144);stroke();restore();fillStyle=red;fillText(w,0,134);fillStyle=red;fillText(o,33,134);fillStyle=red;fillText(r,61,134);fillStyle=red;fillText(l,79,134);fillStyle=red;fillText(d,93,134);save();beginPath();moveTo(0,124);lineTo(121,124);stroke();restore();restore();restore();'
+      );
+    } else if (Konva._renderBackend === 'node-canvas') {
+      assert.equal(
+        trace,
+        'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 40px Arial;textBaseline=alphabetic;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,64);lineTo(110,64);stroke();restore();fillStyle=red;fillText(h,0,54);fillStyle=red;fillText(e,27,54);fillStyle=red;fillText(l,54,54);fillStyle=red;fillText(l,68,54);fillStyle=red;fillText(o,82,54);save();beginPath();moveTo(0,44);lineTo(110,44);stroke();restore();restore();save();save();beginPath();moveTo(0,144);lineTo(121,144);stroke();restore();fillStyle=red;fillText(w,0,134);fillStyle=red;fillText(o,33,134);fillStyle=red;fillText(r,61,134);fillStyle=red;fillText(l,79,134);fillStyle=red;fillText(d,93,134);save();beginPath();moveTo(0,124);lineTo(121,124);stroke();restore();restore();restore();'
+      );
+    } else {
+      assert.equal(
+        trace,
+        'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 40px Arial;textBaseline=alphabetic;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,63);lineTo(110,63);stroke();restore();fillStyle=red;fillText(h,0,53);fillStyle=red;fillText(e,27,53);fillStyle=red;fillText(l,54,53);fillStyle=red;fillText(l,68,53);fillStyle=red;fillText(o,82,53);save();beginPath();moveTo(0,43);lineTo(110,43);stroke();restore();restore();save();save();beginPath();moveTo(0,143);lineTo(121,143);stroke();restore();fillStyle=red;fillText(w,0,133);fillStyle=red;fillText(o,33,133);fillStyle=red;fillText(r,61,133);fillStyle=red;fillText(l,79,133);fillStyle=red;fillText(d,93,133);save();beginPath();moveTo(0,123);lineTo(121,123);stroke();restore();restore();restore();'
+      );
+    }
+  });
 });

test/unit/Transformer-test.ts

@@ -3742,6 +3742,48 @@ describe('Transformer', function () {
     (assert.deepEqual(shape.getClientRect(), rect), 'change data');
   });
 
+  it('attrs change - image', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    // Create a small canvas to use as an image
+    var canvas1 = Konva.Util.createCanvasElement();
+    canvas1.width = 100;
+    canvas1.height = 100;
+
+    var shape = new Konva.Image({
+      x: 50,
+      y: 50,
+      image: canvas1,
+    });
+    layer.add(shape);
+
+    var tr = new Konva.Transformer({
+      nodes: [shape],
+    });
+    layer.add(tr);
+
+    // Check initial size
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
+    delete rect.rotation;
+    assert.deepEqual(shape.getClientRect(), rect, 'initial image');
+    assert.equal(tr.width(), 100, 'initial width');
+    assert.equal(tr.height(), 100, 'initial height');
+
+    // Change to a larger image
+    var canvas2 = Konva.Util.createCanvasElement();
+    canvas2.width = 200;
+    canvas2.height = 150;
+    shape.image(canvas2);
+
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
+    delete rect.rotation;
+    assert.deepEqual(shape.getClientRect(), rect, 'change image size');
+    assert.equal(tr.width(), 200, 'new width');
+    assert.equal(tr.height(), 150, 'new height');
+  });
+
   it('make sure transformer events are not cloned', function () {
     var stage = addStage();
     var layer = new Konva.Layer();