Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="CanvasController" style="font-family: 'arial'">
  <canvas id="myCanvas" style="border: solid;" ng-init="myCanvas=this" ng-mousedown="onMouseDown($event)" ng-mousemove="onMouseMove($event)" ng-mouseup="onMouseUp($event)" ng-mouseleave="onMouseLeave($event)">
  </canvas>

  <button id="clearButton" ng-click="onClearButtonClick($event)">Clear</button>
  <br />
  <h1>{{ x }} {{y}}</h1>
  <h3>Is Drawing: {{isDrawing}}  </h3>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller("CanvasController", function($scope) {
  //console.log("OtherController");
  $scope.isDrawing = false;
  $scope.x = 0;
  $scope.y = 0;
  $scope.lastLine = null;

  $scope.onClearButtonClick = function($event) {
    //console.log("onClearButtonClick");
    var ctx = myCanvas.getContext("2d");
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
  }

  $scope.onMouseDown = function($event) {
    //console.log("OnMouseDown");
    $scope.isDrawing = true;
  }

  $scope.onMouseUp = function($event) {
    //console.log("OnMouseUp");
    $scope.isDrawing = false;
    $scope.lastLine = null;
  }

  $scope.onMouseMove = function($event) {
    //console.log("onMouseMove");
    var ctx = myCanvas.getContext("2d");
    var clientRect = myCanvas.getBoundingClientRect();
    var x = ($event.pageX - clientRect.left);
    $scope.x = x;
    var y = ($event.pageY - clientRect.top);
    $scope.y = y;

    if (!$scope.isDrawing) {
      return;
    }

    if ($scope.lastLine != null) {
      ctx.beginPath();
      ctx.moveTo($scope.lastLine[0], $scope.lastLine[1]);
      ctx.lineWidth = 5;
      ctx.lineTo(x, y);
      ctx.stroke();
    }

    $scope.lastLine = [x, y];
  }

  $scope.onMouseLeave = function($event) {
    //console.log("onMouseLeave");
    $scope.isDrawing = false;
    $scope.lastLine = null;
  }
});