Lasso Tool In Html5 Canvas

I'm trying to build a freeform lasso tool to clip an image inside canvas. I'm using fabric.js to draw the shape. This is my attempt which doesn't seem to work, what am I doing wr

Solution 1:

The image needs to be a fabric.Image.

You could try something like this:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    varOwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);

    OwnCanv.freeDrawingBrush.color = "purple"OwnCanv.freeDrawingBrush.width = 4OwnCanv.on('path:created', function(options) {
        var path = options.path;
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(imgInstance);
        OwnCanv.remove(path);
        OwnCanv.clipTo = function(ctx) {
            path.render(ctx);
        };
        OwnCanv.add(imgInstance);
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script><canvasid="c"width="500"height="500"></canvas>

See these resources for more:

http://fabricjs.com/fabric-intro-part-1/

Multiple clipping areas on Fabric.js canvas

Fabric.js Clip Canvas (or object group) To Polygon