AngularJS Simple Signature Pad Directive (without jQuery) - angularjs

Question

With the help of stackoverflow i got me a simple canvas signature directive. The problem is that it works with mouse events (mousedown, mouseup, mousemove) but is not working with touch events (touchstart,touchmove,touchend). I have ngTouch in my main app module and in the module that holds the directive. I hope you can help me. Here's the code:
var sig = angular.module('signature', ['ngTouch']);
sig.directive("mjav", ['$document', function ($document) {
return {
restrict: "A",
link: function (scope, element) {
var ctx = element[0].getContext('2d');
ctx.canvas.width = window.innerWidth - 20;
var tempCanvas = document.createElement('nanavas');
// variable that decides if something should be drawn on mousemove
var drawing = false;
// the last coordinates before the current move
var lastX;
var lastY;
element.on('touchstart', function (event) {
if (event.offsetX !== undefined) {
lastX = event.offsetX;
lastY = event.offsetY;
} else {
lastX = event.layerX - event.currentTarget.offsetLeft;
lastY = event.layerY - event.currentTarget.offsetTop;
}
// begins new line
ctx.beginPath();
drawing = true;
});
element.on('touchmove', function (event) {
if (drawing) {
// get current mouse position
if (event.offsetX !== undefined) {
currentX = event.offsetX;
currentY = event.offsetY;
} else {
currentX = event.layerX - event.currentTarget.offsetLeft;
currentY = event.layerY - event.currentTarget.offsetTop;
}
draw(lastX, lastY, currentX, currentY);
// set current coordinates to last one
lastX = currentX;
lastY = currentY;
}
});
$document.on('touchend', function (event) {
// stop drawing
drawing = false;
});
// canvas reset
function reset() {
element[0].width = element[0].width;
}
function draw(lX, lY, cX, cY) {
// line from
ctx.moveTo(lX, lY);
// to
ctx.lineTo(cX, cY);
// color
ctx.strokeStyle = "#000";
// draw it
ctx.stroke();
}
}
};
}]);

Answer 1

If someone will need a simple signature directive for AngularJS this is what I came up with in the end:
var sig = angular.module('signature', []);
sig.controller('signatureCtrl', ['$scope', function ($scope) {
$scope.clearVal = 0;
$scope.saveVal = 0;
$scope.clear = function () {
$scope.clearVal += 1; //On this value change directive clears the context
}
$scope.saveToImage = function () {
$scope.saveVal = 1; //On this value change directive saves the signature
}
}]);
sig.directive("signatureDir", ['$document', '$log', '$rootScope', function ($document, $log, $rootScope) {
return {
restrict: "A",
link: function (scope, element, attrs) {
var ctx = element[0].getContext('2d');
ctx.canvas.width = window.innerWidth - 30;
// the last coordinates before the current move
var lastPt;
function getOffset(obj) {
return { left: 15, top: 116 }; //Got a fixed offset
}
attrs.$observe("value", function (newValue) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
});
attrs.$observe("saveVal", function (newValue, dnid) {
var imagedata = ctx.canvas.toDataURL();
$rootScope.signatureTemp.push({'dnid':dnid, 'signature':imagedata});
});
element.on('touchstart', function (e) {
e.preventDefault();
ctx.fillRect(e.touches[0].pageX - getOffset(element).left, e.touches[0].pageY - getOffset(element).top, 2, 2);
lastPt = { x: e.touches[0].pageX - getOffset(element).left, y: e.touches[0].pageY - getOffset(element).top };
});
element.on('touchmove', function (e) {
e.preventDefault();
if (lastPt != null) {
ctx.beginPath();
ctx.moveTo(lastPt.x, lastPt.y);
ctx.lineTo(e.touches[0].pageX - getOffset(element).left, e.touches[0].pageY - getOffset(element).top);
ctx.stroke();
}
lastPt = { x: e.touches[0].pageX - getOffset(element).left, y: e.touches[0].pageY - getOffset(element).top };
});
element.on('touchend', function (e) {
e.preventDefault();
lastPt = null;
});
}
};
}]);
Markup:
<div ng-controller="signatureCtrl">
<ul class="list-group">
<h3 style="padding-left: 15px;">Signature</h3>
<li class="list-group-item">
<canvas saveVal="{{ saveVal }}" value="{{ clearVal }}" style="border: 1px solid black;" id="canvas1" width="200" height="200" signatureDir></canvas>
<button class="btn btn-warning" ng-click="clear()">Clear</button>
<button class="btn btn-primary" ng-click="ok()">Save</button>
</li>
</ul>
</div>
If anyone can see some bad code in here please correct me!