title: How to make a signature pad in AngularJS or pure javascript without Jquery?
body: <p>I'm making a mobile app and I need the simplest possible signature pad for javascript for implementing with AngularJS but I cant find any resources anywhere. </p>
  
  <p>All the plugins use jquery which I refuse to load since it's a mobile app and jquery would just bloat the app. Does anyone know of a tutorial I could use or could give me basic directions how would I do this, what elements do i need... I'd really appriciate it! </p>
  
  <p>UPDATE: I just wrote something basic as it was answered here. But it doesn't work. Can anyone indentifiy why? I have a directive that i inject into html as an element (). Console is not returning any exceptions. </p>
  
  <pre><code>sig.directive("signatureDirective", function () {
      return {
          template: '&lt;canvas id="canvas" width="500" height="100" style="border: 1px solid #ccc;"&gt;&lt;/canvas&gt;',
          restrict: 'E',
          link: function (scope, element, attrs) {
  
              var canvas = $(element);  
              var context = canvas.getContext("2d");           
              var clickX = new Array();
              var clickY = new Array();
              var clickDrag = new Array();
              var paint;
  
              $(element).addEventListener("mousedown", mouseDown, false);
  
              $(element).addEventListener("mousemove", mouseXY, false);
  
              document.body.addEventListener("mouseup", mouseUp, false);
  
              $(element).addEventListener("touchstart", mouseDown, false);
  
              $(element).addEventListener("touchmove", mouseXY, true);
  
              $(element).addEventListener("touchend", mouseUp, false);
  
              document.body.addEventListener("touchcancel", mouseUp, false);
  
              function draw() {
                  context.clearRect(0, 0, 500, 100); 
  
                  context.strokeStyle = "#000000";  
                  context.lineJoin = "miter";       
                  context.lineWidth = 2;            
  
                  for (var i = 0; i &lt; clickX.length; i++) {
                      context.beginPath();                               
                      if (clickDrag[i] &amp;&amp; i) {
                          context.moveTo(clickX[i - 1], clickY[i - 1]);  
                      } else {
                          context.moveTo(clickX[i] - 1, clickY[i]);      
                      }
                      context.lineTo(clickX[i], clickY[i]);              
                      context.stroke();                                  
                      context.closePath();                               
                  }
              }
  
              function mouseDown(e) {
                  var mouseX = e.pageX - this.offsetLeft;
                  var mouseY = e.pageY - this.offsetTop;
  
                  paint = true;
                  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                  draw();
              }
  
              function mouseUp() {
                  paint = false;
              }
  
              function mouseXY(e) {
                  if (paint) {
                      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                      draw();
                  }
              }
  
          }
      };
  });
  </code></pre>