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?