Fabricjs. image with rounded corner and stroke

Question

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

https://jsfiddle.net/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();
});

Answer 1

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.com/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.net/melchiar/78nt10ua/