fabric demo

fabric clip demo

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>

  
  <canvas id="canvas" width="300" height="300"></canvas>

CSS

#canvas {
  background-color:#ddd;
}

JavaScript

var canvas = new fabric.Canvas('canvas')

var rect = new fabric.Rect({
	width: 100,
  height:100,
  fill: 'red',
  left: 100,
  top: 100
});

canvas.add(rect)

var clipGroup = new fabric.Group([
	new fabric.Circle({
    radius: 50,
    left: -50,
    top: -50
  }),
  new fabric.Rect({
  	width: 25,
    height: 25,
    left: -12.5,
    top: -12.5,
    globalCompositeOperation: 'destination-out'
  })
]);


rect.clipPath = clipGroup;