angularjs - Mark multiple point to point zones on Canvas -

i marking point point zones on canvas using angularjs. want close zone once click near starting position of zone , start second new zone. (to plot lines zone clicking on canvas)

current working principal (please click on link attachment)

my html part :

<div ng-app="myapp" ng-controller="example">      <div>           <canvas width="500" height="300" id="mycanvas" drawing ng-click="draw($event)" style="border:1px solid #000000;"></canvas>      </div> </div> 

my app.js:

var app = angular.module("myapp",[]); app.controller("example", function($scope, $interval) {   var c=document.getelementbyid("mycanvas");   var ctx=c.getcontext("2d");   $scope.x;   $scope.y;   $scope.lastx = 0;   $scope.lasty = 0;   $scope.sw = 5;   $scope.draw = function(e) {     $scope.lastx = $scope.x;     $scope.lasty = $scope.y;     $scope.x = e.offsetx;     $scope.y = e.offsety;     $scope.elements.push(     {"x":$scope.x,     "y":$scope.y,     "lx":$scope.lastx,     "ly":$scope.lasty}     );     ctx.moveto($scope.lastx, $scope.lasty);     ctx.lineto($scope.x, $scope.y);     ctx.strokestyle = "#4bf";     ctx.stroke();            }; });