diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index b5791cc1..a17cc878 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -65,6 +65,11 @@ export class Image extends Shape { } } _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 index 1f666ed3..be9c9516 100644 --- 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(); + }); + }); });