fabric.js clipTo image

Clipping function for fabric.Objects (image)

by Hooman Askari

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>

CSS

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

JavaScript

var canvas;

$(function(){
    canvas = window._canvas = new fabric.Canvas('canvas');
    fabric.Image.fromURL('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', function(img) {
      img.set({
        left: 250,
        top: 250,
        width:200,
        height:200,
        clipTo: function (ctx) {
         this.setCoords();
         ctx.beginPath();
        ctx.fillRect(
            0,
            0,
            100,
            100
        );
        ctx.closePath();
     
        }
      });
      canvas.add(img).setActiveObject(img);
    });
});