Fixed cached render with buffer canvas is used. close #2002

src/Shape.ts

@@ -645,7 +645,16 @@ export class Shape<
       stage = this.getStage();
       const bc = bufferCanvas || stage.bufferCanvas;
       const bufferContext = bc.getContext();
-      bufferContext.clear();
+      // When caching, the buffer canvas may have a translation applied.
+      // We need to reset the transform before clearing to ensure the entire canvas is cleared.
+      if (bufferCanvas) {
+        bufferContext.save();
+        bufferContext.setTransform(1, 0, 0, 1, 0, 0);
+        bufferContext.clearRect(0, 0, bc.width, bc.height);
+        bufferContext.restore();
+      } else {
+        bufferContext.clear();
+      }
       bufferContext.save();
       bufferContext._applyLineJoin(this);
       bufferContext._applyMiterLimit(this);

test/unit/Node-cache-test.ts

@@ -4,6 +4,7 @@ import {
   Konva,
   compareLayerAndCanvas,
   cloneAndCompareLayer,
+  compareLayers,
   compareCanvases,
   createCanvasAndContext,
   loadImage,
@@ -1531,4 +1532,84 @@ describe('Caching', function () {
 
     assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect);
   });
+
+  it('cache group with shape with shadow', function () {
+    // Replicate the exact structure from sandbox.html
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    // Group (name: 'node')
+    var outerGroup = new Konva.Group({
+      name: 'node',
+    });
+    layer.add(outerGroup);
+
+    // Group (name: 'node-group', id: 'root_node', x: 25, y: 25)
+    var nodeGroup = new Konva.Group({
+      name: 'node-group',
+      id: 'root_node',
+      x: 25,
+      y: 25,
+    });
+    outerGroup.add(nodeGroup);
+
+    // Group (empty)
+    var innerGroup = new Konva.Group();
+    nodeGroup.add(innerGroup);
+
+    // Group (name: 'ports-group')
+    var portsGroup = new Konva.Group({
+      name: 'ports-group',
+    });
+    innerGroup.add(portsGroup);
+
+    // Group (id: 'root_node_port_date', name: 'port-group', y: 80, draggable: true)
+    var portGroup = new Konva.Group({
+      id: 'root_node_port_date',
+      name: 'port-group',
+      y: 80,
+      draggable: true,
+    });
+    portsGroup.add(portGroup);
+
+    // Rect (name: 'label-bg', y: -11, width: 60.9375, height: 22.4, stroke: 'red', fill: 'white', x: -12, cornerRadius: 14.4, opacity: 0.2)
+    var labelBg = new Konva.Rect({
+      name: 'label-bg',
+      y: -11,
+      width: 60.9375,
+      height: 22.4,
+      stroke: 'green',
+      fill: 'white',
+      x: -12,
+      cornerRadius: 14.4,
+      opacity: 0.2,
+    });
+    portGroup.add(labelBg);
+
+    // Circle (name: 'circle', radius: 5, fill: 'white', stroke: 'red', shadowColor: 'red', shadowEnabled: true, shadowBlur: 10, shadowOpacity: 0.75)
+    var circle = new Konva.Circle({
+      name: 'circle',
+      radius: 5,
+      fill: 'white',
+      stroke: 'red',
+      shadowColor: 'red',
+    });
+    portGroup.add(circle);
+
+    layer.draw();
+
+    // Clone before caching
+    var layerNonCached = layer.clone();
+    stage.add(layerNonCached);
+    layerNonCached.draw();
+
+    // Cache the nodeGroup
+    nodeGroup.cache();
+    layer.draw();
+
+    // Compare
+    compareLayers(layer, layerNonCached, 50);
+  });
 });