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

app.directive("drawing", function(){
    return {
        restrict: "A",
        link: function(scope, element, attrs){
            var rectSize = element[0].width;
            var ctx = element[0].getContext('2d');

            ctx.fillStyle="#FFFFFF";
            ctx.fillRect(0,0,rectSize,rectSize);

            var mobileoffsetX = 100;
            var mobileoffsetY = 30;

            var drawing = false;
            var lastX, lastY;

            var start  = 'mousedown',
                move   = 'mousemove',
                end    = 'mouseup';

            if (Modernizr.touch === true) {
                start  = 'touchstart';
                move   = 'touchmove';
                end    = 'touchend';
            }


            element.bind(start, function(event){
                if(start == 'touchstart') {
                    event.preventDefault();
                }

                if(event.offsetX!==undefined){
                    lastX = event.offsetX;
                    lastY = event.offsetY;
                } else if(event.pageX!==undefined) {
                    // Firefox compatibility
                    lastX = event.pageX - event.currentTarget.offsetLeft;
                    lastY = event.pageY - event.currentTarget.offsetTop;
                } else {
                    // Mobile compatibility
                    lastX = event.originalEvent.targetTouches[0].pageX - mobileoffsetX;
                    lastY = event.originalEvent.targetTouches[0].pageY - mobileoffsetY;
                }

                ctx.beginPath();
                drawing = true;

            });


            element.bind(move, function(event){
                if(move == 'touchmove') {
                    event.preventDefault();
                }

                if(drawing){
                    if(event.offsetX!==undefined){
                        currentX = event.offsetX;
                        currentY = event.offsetY;
                    } else if(event.pageX!==undefined) {
                        currentX = event.pageX - event.currentTarget.offsetLeft;
                        currentY = event.pageY - event.currentTarget.offsetTop;
                    } else {
                        currentX = event.originalEvent.targetTouches[0].pageX - mobileoffsetX;
                        currentY = event.originalEvent.targetTouches[0].pageY - mobileoffsetY;
                    }

                    draw(lastX, lastY, currentX, currentY);

                    lastX = currentX;
                    lastY = currentY;
                }
            });

            element.bind(end, function(event){
                drawing = false;
            });

            function reset(){
                element[0].width = element[0].width;
            }

            function draw(lX, lY, cX, cY){
                ctx.moveTo(lX,lY);
                ctx.lineTo(cX,cY);
                ctx.lineWidth = 3;
                ctx.strokeStyle = '#000000';
                ctx.stroke();
            }
        }
    };
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
    <script data-require="modernizr@*" data-semver="2.6.2" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div>
      <h1>Drawboard</h1>
      <canvas id="draw-board" width="600" height="600" data-drawing></canvas>
    </div>
  </body>

</html>
/* Put your css in here */

#draw-board {
  border: 3px solid black;
}