diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index 1bc59aa8..8363b9d2 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -91,20 +91,25 @@ export class Image extends Shape { } } - context.beginPath(); - if (!cornerRadius) { - context.rect(0, 0, width, height); - } else { - Util.drawRoundedRectPath(context, width, height, cornerRadius); + if (this.hasFill() || this.hasStroke()) { + context.beginPath(); + cornerRadius + ? Util.drawRoundedRectPath(context, width, height, cornerRadius) + : context.rect(0, 0, width, height); + context.closePath(); + context.fillStrokeShape(this); } + if (image) { - context.save(); - cornerRadius && context.clip(); + // context.save(); + if (cornerRadius) { + // Util.drawRoundedRectPath(context, width, height, cornerRadius); + context.clip(); + } context.drawImage.apply(context, params); - context.restore(); + // context.restore(); } - context.closePath(); - context.fillStrokeShape(this); + // If you need to draw later, you need to execute save/restore } _hitFunc(context) { var width = this.width(), diff --git a/test/unit/Image-test.ts b/test/unit/Image-test.ts index 0376433d..bebc7990 100644 --- a/test/unit/Image-test.ts +++ b/test/unit/Image-test.ts @@ -26,7 +26,6 @@ describe('Image', function () { offset: { x: 50, y: 30 }, crop: { x: 135, y: 7, width: 167, height: 134 }, draggable: true, - cornerRadius: 15, }); layer.add(darth); @@ -44,7 +43,6 @@ describe('Image', function () { assert.equal(darth.getHeight(), 100); assert.equal(darth.offset().x, 50); assert.equal(darth.offset().y, 30); - assert.equal(darth.cornerRadius(), 15); var crop = darth.crop(); @@ -169,6 +167,7 @@ describe('Image', function () { crop: { x: 186, y: 211, width: 106, height: 74 }, draggable: true, scale: { x: 0.5, y: 0.5 }, + cornerRadius: 15, }); layer.add(darth); @@ -210,6 +209,7 @@ describe('Image', function () { assert.equal(darth.cropY(), 6); assert.equal(darth.cropWidth(), 7); assert.equal(darth.cropHeight(), 8); + assert.equal(darth.cornerRadius(), 15); done(); });