fabric.js clipTo image

Clipping function for fabric.Objects (image)

by mudin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.js"></script>
<canvas id="canvas" width="500" height="500" class="canvas"></canvas>
<button id="json">toJSON/loadFromJSON</button>
<button id="reset">reset</button>

CSS

.canvas {
    border: 1px solid #C0C0C0;
}

JavaScript

var canvas, json;

function init() {
    var radius = 100;
    var start = -150*Math.PI/180
    var end = -30*Math.PI/180
    let point1 = new fabric.Point(
      (radius+1)*Math.cos(start),
      (radius+1)*Math.sin(start)
    )
    let point2 = new fabric.Point(
      (radius+1)*Math.cos(end),
      (radius+1)*Math.sin(end)
    )
    fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
        img.scale(1).set({
            left: 0,
            top: 0,
            clipPath:new fabric.Group([
            new fabric.Circle({
              originX:'center',
              originY:'center',
              radius,
              startAngle: start,
				      endAngle: end,
              stroke:false,
              strokeWidth:6
            }),
            new fabric.Polygon([point1,{x:0,y:0},point2],{
              originX:'center',
              originY:'center',
              strokeWidth:6
            })
            ])
/*             clipTo: function (ctx) {
                            ctx.moveTo(0, 0);
               ctx.arc(0, 0,300, -Math.PI/6, -Math.PI+Math.PI/6 , true);
               }
             */            }
        );
        canvas.add(img).setActiveObject(img);
    });
}
$(function () {
    canvas = window._canvas = new fabric.Canvas('canvas');
    init();
    
    document.getElementById('json').addEventListener('click', function() {
        json = window._json = canvas.toJSON();
        canvas.clear();
        canvas.loadFromJSON(json);
    });
    document.getElementById('reset').addEventListener('click', function() {
        canvas.clear();
        init();
    });
});