Why is my custom signature pad directive not showing canvas? (without jQuery) - angularjs

Question

Hi I'm working on a signature pad for angularjs without importing jquery, i'm just using elements of jquery lite that angular uses. I have hit a wall and I have no idea how to get past it. Here's my code:
var sig = angular.module('signature', []);
sig.directive("signatureDirective", function () {
return {
template: '<canvas id="canvas" width="500" height="100" style="border: 1px solid #ccc;"></canvas>',
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;
canvas.on("mousedown", mouseDown, false);
canvas.on("mousemove", mouseXY, false);
document.body.on("mouseup", mouseUp, false);
canvas.on("touchstart", mouseDown, false);
canvas.on("touchmove", mouseXY, true);
canvas.on("touchend", mouseUp, false);
canvas.on('touchmove', function (e) {
pen.x = e.pageX;
pen.y = e.pageY;
});
canvas.on('touchstart', function (e) {
context.fillRect(pen.x, pen.y, 1, 1);
});
canvas.on('mousemove', function (e) {
pen.x = e.pageX;
pen.y = e.pageY;
});
canvas.on('mousedown', function (e) {
context.fillRect(pen.x, pen.y, 1, 1);
});
context.getImageData();
document.body.on("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 < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && 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 addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function mouseUp() {
paint = false;
}
function mouseXY(e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
draw();
}
}
}
};
});
I append it as an element but it doesnt show and javascript doesn't throw any exceptions. Can anyone help?

Answer 1

I found a great answer for you on stackoverflow, a canvas drawing directive with live example.
example: http://plnkr.co/aG4paH

Answer 2

HTML:
<div class="col-md-8" cg-signature>
<div class="sig sigWrapper">
<div class="typed"></div>
<canvas class="pad" width="197" height="52"></canvas>
<input type="hidden" name="output" class="output">
<a class="clearButton" href="#">Clear</a>
</div>
</div>
JavaScript:
angular.module('YourModuleName')
.directive('directiveName', function() {
var directive = {};
directive.restrict = 'A';
directive.link = function($scope, $ele, $attrs){
$ele.addClass('sigPad')
$ele.ready(function() {
$ele.signaturePad({drawOnly:true});
});
};
return directive;
});