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.

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://ift.tt/1EY2Kze";

<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1tznvBx"></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.