FabricJS Link Mask

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas width="600" height="400" id="c"></canvas>

<button value="0.5">0.5x</button>
<button value="1">1x</button>
<button value="2">2x</button>

JavaScript

var canvas = new fabric.Canvas('c');
function zoom(val){
  var canvasCenter = 
            {
                x:canvas.width/2,
                y:canvas.height/2
            };
  canvas.zoomToPoint(canvasCenter,val);
}

var btns = document.querySelectorAll("button");
for (var i=0;i<btns.length;i++){
	btns[i].onclick = function(){zoom(this.value)};
};

var img = "https://cdn.pixabay.com/photo/2019/09/30/14/51/squirrel-4515962_960_720.jpg";

fabric.Image.fromURL(img, function(oImg) {
	oImg.scaleX = 0.5;
  oImg.scaleY = 0.5;
  canvas.add(oImg);
  
  var circle = new fabric.Circle({radius:100,top:100,left:100});
  oImg.clipPath = circle;
  
});