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

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?

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

I found a great answer for you on stackoverflow, a canvas drawing directive with live example.

example: http://plnkr.co/aG4paH

edited May 23 '17 at 10:24

Community

1
1

answered Mar 03 '14 at 08:15

Alex Choroshin

6,177
2
28
36

Deepak Dubey · Answer 2 · 2015-02-26T11:00:25.663

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;
});

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

2 Answers2