title: Fabricjs. image with rounded corner and stroke
body: <p>Is there a simple way of clipping an image with rounded corner and inner stroke? </p>
  
  <p><a href="https://i.stack.imgur.com/mvdM5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mvdM5.png" alt="rounded"></a></p>
  
  <p><a href="https://jsfiddle.net/4tursk3y/" rel="nofollow noreferrer">https://jsfiddle.net/4tursk3y/</a></p>
  
  <pre><code>$('#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();
  });
  </code></pre>