How to make a signature pad in AngularJS or pure javascript without Jquery?

Question

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.

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!

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.

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;

            $(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 < 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 mouseUp() {
                paint = false;
            }

            function mouseXY(e) {
                if (paint) {
                    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                    draw();
                }
            }

        }
    };
});

Answer 1

Take a look at the canvas element. You can directly manipulate the pixel data and draw primitive shapes with a canvas and as a HTML element, it supports all of the mouse manipulation events that you will need out of the box.

<canvas id='signature' width='300' height='50'></canvas>

Something like this:

var canvas, context;
var pen = {};
canvas = document.getElementById('signature');
context = canvas.getContext('2d');

canvas.addEventListener('mousemove', function(e) {
  pen.x = e.pageX;
  pen.y = e.pageY;
});

canvas.addEventListener('mousedown', function(e) {
  context.fillRect(pen.x, pen.y, 1, 1);
});

// when you're done, you can get a base 64 encoded png version
// of the image data.

context.getImageData();

This is a pretty primitive way of doing it, using the fillRect method to simulate pixels. If you wanted to look at heavier solutions, you could try doing something with click points and bezier curves.

If you're using Angular, then you'll almost certainly want to wrap this up in a directive as well.

---

EDIT

First off, you're using a strange mix of jQuery and plain js. All of the lines that look like this, won't work.

$(element).addEventListener("mousedown", mouseDown, false);

Should look like this:

$(element).on("mousedown", mouseDown, false);

Next off, you seem to be calling a method called addClick which isn't actually there.