AngularJS : directive to draw on a canvas.

AngularJS : directive to draw on a canvas.

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div ng-app="app" id="console-log">
  <strong style="font-size:25px;">AngularJS Canvas drawing directive example</strong>
  <p>click, drag and draw!</p>
  <br/><br/>
  <canvas width="500" height="300" id="canvas" canvas-directive></canvas>
</div>

CSS

#canvas{
  border-bottom: 1px solid rgba(0,0,0,0.2); 
  background-color: #FFF;
  box-shadow: 0 9px 20px -5px rgba(0,0,0,0.2);
}

JavaScript

/* ANGULAR */
angular
  .module('app', [])
  .directive('canvasDirective', CanvasDirective)

function CanvasDirective() {
  return {
    restrict: "A",
    link: function(scope, element) {
      // get canvas context
      var ctx = element[0].getContext('2d');
      // capture drawing modus
      var isDrawing = false;
      // last mouse coordinates
      var lastMouse = {x:0, y:0}

			// mouse down handler
      element.bind('mousedown', function(event) {
      	console.log(event.offsetX;);
      });
      
      // mouse move handler
      element.bind('mousemove', function(event) {
        if (isDrawing) {
          // draw
          ctx.moveTo(lastMouse.x, lastMouse.y);
          ctx.lineTo(event.offsetX, event.offsetY);
          ctx.strokeStyle = "red";
          ctx.stroke();        
          // save last mouse
					lastMouse.x = event.offsetX;
      		lastMouse.y = event.offsetY;
        }

      });
      
      // mouse up handler
      element.bind('mouseup', function(event) {
        isDrawing = false;
      });

    }
  };
}