Lasso tool in html5 canvas

Question

I'm trying to build a freeform lasso tool to clip an image inside canvas. I'm using fabric.js to draw the shape.

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

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

  OwnCanv.freeDrawingBrush.color = "purple"
  OwnCanv.freeDrawingBrush.width = 4

  ctx.clip();

  ctx.drawImage(img, 0, 0);
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

This is my attempt which doesn't seem to work, what am I doing wrong here ?

Can anyone help me please? It would really be appreciated.

Good start, but please try to explain what is going wrong for you - is there an error, does it not work, does it not look right, etc. This will ensure people know where to start in answering the question. — Chris Ballard, Mar 31 '15 at 11:10

score 3 · Answer 1 · edited May 23 '17 at 10:33

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() {
    var OwnCanv = 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 = 4

    OwnCanv.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";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

<canvas id="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

This is older but just came across it and it is excellent. Just curious, do you know if there is a way to take the "cut out" part of the image and save it somewhere as a PNG with transparent background (i.e. the white part of the image after you clip would essentially become transparent around the part that you cut out and want to keep) — user3304303, Jan 31 '16 at 17:41
I don't know a way off the top of my head but it's probably possible. — ekuusela, Jan 31 '16 at 19:18

Lasso tool in html5 canvas

1 Answers1

Linked