Fixed opacity level when a cached shape has opacity, fill and stroke. close #1989

CHANGELOG.md

@@ -3,6 +3,10 @@
 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.

src/Shape.ts

@@ -658,8 +658,13 @@ export class Shape<
       if (hasShadow) {
         context._applyShadow(this);
       }
-      context._applyOpacity(this);
+      // if we are caching self, we don't need to apply opacity and global composite operation
-      context._applyGlobalCompositeOperation(this);
+      // because it will be applied in the cache
+      if (!cachingSelf) {
+        context._applyOpacity(this);
+        context._applyGlobalCompositeOperation(this);
+      }
+
       context.drawImage(
         bc._canvas,
         bc.x || 0,

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