fabric.js clipTo image

Clipping function for fabric.Objects (image)

by mudin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.min.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;
    fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
        img.scale(1).set({
            left: 0,
            top: 0,
            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();
    });
});