JSFiddle - React, Tailwind, and code Playground

by tinyhustlee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id="ex1" width="200" height="200"></canvas>
<button onclick="zoomCanvas()">Zoom canvas</button>

JavaScript

var canvas = new fabric.Canvas('ex1');
  var clipPath = new fabric.Circle({
    radius: 40,
    top: 0,
    left: 50,
    absolutePositioned: true
  });
  var rect = new fabric.Rect({
    width: 200,
    height: 100,
    fill: 'red'
  });
  rect.clipPath = clipPath;
  canvas.add(rect);
zoomCanvas = function(){
  canvas.setDimensions({'width' : 400, 'height' : 400});
  	canvas.setZoom(2);
  };