JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="c" width="600" height="300" class="c"></canvas>
<input type="button" id="clip" value="Add Clip">
<input type="button" id="export" value="Export">

JavaScript

var canvas = window._canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
  img.scale(0.2).set({
    left: 10,
    top: 10,
    angle: 0,
    stroke: 'red',
    strokeWidth: 12
  });
  canvas.add(img);
});

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
  img.scale(0.2).set({
    left: 180,
    top: 10,
    angle: 0,
    stroke: 'red',
    strokeWidth: 12
  });
  canvas.add(img);
});

function roundedCorners(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:'',
    stroke: '#ff0000',
    strokeWidth: 6
  });
  rect._render(ctx, false);
}

$('#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();
});
$('#export').click(function(){
	console.log(canvas.toJSON());
})