Clip Masking In Fabric.js

Clip Img Mask on any Type of Shapes

by naimsajjad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="c" style="border:1px solid #000"></canvas>

JavaScript

(function() {
  var img01URL = 'http://fabricjs.com/assets/printio.png';
  var img02URL = 'http://fabricjs.com/lib/pug.jpg';
  var img03URL = 'http://fabricjs.com/assets/ladybug.png';
  var img03URL = 'http://fabricjs.com/assets/ladybug.png';
  var canvas = new fabric.Canvas('c');
  canvas.backgroundColor = "red";
  canvas.setHeight(300);
  canvas.setWidth(500);

  canvas.setZoom(1)
  var circle = new fabric.Circle({
    radius: 40,
    top: 50,
    left: 50,
    fixed: true,
    fill: '',
    stroke: '1'
  });
  canvas.add(circle);
  canvas.renderAll();

  fabric.Image.fromURL(img01URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 10;
    oImg.top = 10;
    oImg.clipPath = circle;
    oImg.clipTo = function(ctx) {
      clipObject(this, ctx)
    }
    canvas.add(oImg);
    canvas.renderAll();
  });
  var bili = new...