fabric.js clipTo canvas

Clipping function for fabric.Canvas

by 20yco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>

CSS

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

JavaScript

var canvas, json;

function init() {
    var rect = new fabric.Rect({
        width: 80,
        height: 80,
        left: 150,
        top: 150,
        fill: 'blue'
    });
    canvas.add(rect);
}
$(function () {
    canvas = new fabric.Canvas('canvas',{
                    width: 360,
                    height: 640,
                    selection: false,
                    selectionColor: '#0003FF',
                    enableRetinaScaling: true,
                    uniScaleKey: null,
                    objectCaching: true
               });
               
    canvas.clipTo = function (ctx)
               {
                    var background = new fabric.Rect({
                         rx: 13,
                         ry: 13,
                         width: 340,
                         height: 580,
                         top: 10,
                         left: 10,
                         fill: '#444',
                    });
                    
                    background._render(ctx, true);

                    console.log(background);
               };
    init();
});