Is there a simple way of clipping an image with rounded corner and inner stroke?

/

$('#clip').click(function() {
    canvas._objects[1].set({
        'clipTo': function(ctx) {
            var rect = new fabric.Rect({
                left: 0,
                top: 0,
                rx: 20 / this.scaleX,
                ry: 20 / this.scaleY,
                width: this.width,
                height: this.height,
                fill: '#000000'
            });
            rect._render(ctx, false);
        }
    });
    canvas.renderAll();
});

Is there a simple way of clipping an image with rounded corner and inner stroke?

https://jsfiddle/4tursk3y/

$('#clip').click(function() {
    canvas._objects[1].set({
        'clipTo': function(ctx) {
            var rect = new fabric.Rect({
                left: 0,
                top: 0,
                rx: 20 / this.scaleX,
                ry: 20 / this.scaleY,
                width: this.width,
                height: this.height,
                fill: '#000000'
            });
            rect._render(ctx, false);
        }
    });
    canvas.renderAll();
});

• javascript
• fabricjs

2 Answers 2

You can use a rectangle with a pattern fill to get rounded image corners without clipping the stroke.

var rect = new fabric.Rect({
  left: 10,
  top: 10,
  width: 140,
  height: 215,
  stroke: 'red',
  strokeWidth: 3,
  rx:10,
  ry:10
});
canvas.add(rect);

fabric.util.loadImage('http://fabricjs./assets/pug.jpg', function (img) {
  rect.setPatternFill({
    source: img,
    repeat: 'no-repeat',
    patternTransform: [0.2, 0, 0, 0.2, 0, 0]
  });
  canvas.renderAll();
});

https://jsfiddle/melchiar/78nt10ua/

for newer fabric versions use this

const roundedCorners = (fabricObject, cornerRadius) => new fabric.Rect({
 width: fabricObject.width,
 height: fabricObject.height,
 rx: cornerRadius / fabricObject.scaleX,
 ry: cornerRadius / fabricObject.scaleY,
 left: -fabricObject.width / 2,
 top: -fabricObject.height / 2
})

image.set("clipPath", roundedCorners(image, 20))