fabric.js setGradient

by Daedalus

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="600" height="600" class="canvas"></canvas>

JavaScript

var canvas;

$(function () {
    var circle;
    canvas = window.__canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    var mask = new fabric.Circle({
        left: 125,
        top: 125,
        radius: 25,
        fill: 'black'
    });
    new fabric.Image.fromURL('http://placehold.it/200x200', function (img) {
        circle = img;
        circle.filters = [];
        circle.filters.push(new fabric.Image.filters.Mask({
            'mask': mask,
                'channel': 3
        }));
        circle.applyFilters(canvas.renderAll.bind(canvas));
        canvas.add(circle);
    });
    //canvas.add(mask);
});