JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="1000" height="500" id="c1"></canvas>
<canvas width="200" height="200" id="c2"></canvas>

CSS

canvas {
    border:1px silver;
}

JavaScript

canvas1 = new fabric.Canvas('c1');
        
fabric.loadSVGFromURL('http://fiddle.jshell.net/a.svg', function(objects, options) {
  //var logo = new fabric.Path.fromObject(svg[0]);
  //maskPath.render(ctx);
 var logo = fabric.util.groupSVGElements(objects, options);
 //logo.paths[0].scaleToWidth(140)
  fabric.Image.fromURL('http://img30.360buyimg.com/uba/jfs/t3184/313/5366834259/271447/688d7dd6/586c8df6Nbef2b00e.jpg', function(img) {
    
     img.scaleToWidth(5000);
				canvas1.clipTo = function (ctx) {
          logo.paths[0].canvas =  canvas1;
          logo.paths[0].render(ctx);
          logo.paths[0].x=0;
          logo.paths[0].y=0
          logo.paths[0].scaleToWidth(90)
          logo.paths[0].setCoords();
        }
    canvas1.add(img);
		//canvas1.add(logo.paths[0])

    canvas1.renderAll();
  })
})