fix shadow + corner radius for images, close #1734

konvajs · Jul 17, 2024 · 3f6f9f9 · 3f6f9f9
1 parent ac1587f
commit 3f6f9f9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts
@@ -65,6 +65,11 @@ export class Image extends Shape<ImageConfig> {
     }
   }
   _useBufferCanvas() {
+    const hasCornerRadius = !!this.cornerRadius();
+    const hasShadow = this.hasShadow();
+    if (hasCornerRadius && hasShadow) {
+      return true;
+    }
     return super._useBufferCanvas(true);
   }
   _sceneFunc(context: Context) {

diff --git a/test/unit/Image-test.ts b/test/unit/Image-test.ts
@@ -413,4 +413,39 @@ describe('Image', function () {
       done();
     });
   });
+
+  it('corner radius with shadow', function (done) {
+    // that will trigger buffer canvas
+    loadImage('darth-vader.jpg', (imageObj) => {
+      var stage = addStage();
+
+      var layer = new Konva.Layer();
+      var darth = new Konva.Image({
+        x: 20,
+        y: 20,
+        image: imageObj,
+        cornerRadius: 10,
+        draggable: true,
+        stroke: 'red',
+        strokeWidth: 100,
+        strokeEnabled: false,
+        shadowColor: 'black',
+        shadowBlur: 10,
+        shadowOffsetX: 10,
+        shadowOffsetY: 10,
+        scaleX: 0.5,
+        scaleY: 0.5,
+      });
+
+      layer.add(darth);
+      stage.add(layer);
+
+      assert.equal(
+        layer.getContext().getTrace(true),
+        'clearRect();save();shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();'
+      );
+
+      done();
+    });
+  });
 });