Edit in JSFiddle

  $.fn.extend({
  lasso: function () {
     this.mousedown(function (e) {
        // left mouse down switches on "capturing mode"
        if (e.which === 1 && !$(this).is(".lassoRunning")) {
          $(this).addClass("lassoRunning");
          $(this).data("lassoPoints", []);
          $(this).trigger("lassoBegin");
          //alert("here");
        }
      });
      this.mouseup(function (e) {
        // left mouse up ends "capturing mode" + triggers "Done" event
        if (e.which === 1 && $(this).is(".lassoRunning")) {
          $(this).removeClass("lassoRunning");
          $(this).trigger("lassoDone", [$(this).data("lassoPoints")]);
        }
      });
      this.mousemove(function (e) {
        // mouse move captures co-ordinates + triggers "Point" event
        if ($(this).is(".lassoRunning")) {
          var point = [e.offsetX, e.offsetY];
          $(this).data("lassoPoints").push(point);
          $(this).trigger("lassoPoint", [point]);
        }
      });
      return this;
  }
});
      
$(document).ready(function() {
     
  $("#myDiv")
  .lasso()
  .on("lassoBegin", function(e, lassoPoints) {
      log("lassoBegin");
      c2 = document.getElementById('myCanvas').getContext('2d');
      c2.fillStyle = '#0F0';
      c2.beginPath();
      
      c2.moveTo(e.pageX, e.pageY);
      // log("lasso begins..." + e.pageX + "," + e.pageY);
  })
  .bind("lassoPoint", function(e, lassoPoint) {
    c2.lineTo(lassoPoint[0], lassoPoint[1] );
    c2.fill();
    log(lassoPoint[0] + "," + lassoPoint[1]);
  })
  .on("lassoDone", function(e, lassoPoints) {
    // do something with lassoPoints
    c2.closePath();
	//c2.fill();
    log("lasso done. ");
    CreateArea(lassoPoints);
  });
});

function CreateArea(_lassoPoints) {
    
}
    
    
  

 <div id="myDiv">
  <canvas id="myCanvas"></canvas>
     
  </div>
<div id="log"></div><input type="button" value="Clear Log" onclick="ClearLog()"/>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,280,300);
</script>

<script>
   function log(s) {$('#log').append(s + "<br>"); }
   function ClearLog() {$('#log').empty();}
    </script>