update cdn link

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 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.9",
   "description": "HTML5 2d canvas library.",
   "author": "Anton Lavrenov",
   "type": "module",

src/Shape.ts

@@ -658,8 +658,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/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/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();