在Canvas上标记多个点到点区域

Question

我使用Angularjs在Canvas上指向点区域。 一旦我在区域的起始位置附近点击并开始第二个新区域，我想关闭该区域。 （要绘制区域的线条，我只是点击“画布”）

Current Working Principal（请点击链接以获取附件）

我的HTML部分：

<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>

我的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();         
  };
});