title: Capturing mouse click co-ordinates on canvas using Angularjs
body: <p>I'm newbie to angularjs and canvas. What I'm trying to do is draw a circle at a point on the screen where the user clicks first. For every subsequent click, capture the co-ordinates, draw another circle at the point of the second click, and connect the two with a bezier curve. If the y co-ordinate of the second click is higher/lower than the first, the two circles have to be connected by a s-type bezier curve. If the two have the same y co-ordinates they need to be connected with a straight line. All subsequent circles are connected to the first one.</p>
  
  <p>I can't seem to get started even with the first part. Here's my code.</p>
  
  <pre><code>&lt;canvas  ng-click="addOnClick($event)" id="canvas1" width="600" height= "600"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Here's the code to capture the click</p>
  
  <pre><code>$scope.doClick = function(event){
  
      var x = event.x;
      var y = event.y;
      var offsetX = event.offsetX;
      var offsetY = event.offsetY;
  
      alert(x, y, offsetX, offsetY);
  };
  </code></pre>
  
  <p>But nothing seems to happen when I click on my canvas. Can someone help me get started.</p>