Draw on HTML5 canvas on touch devices

I am trying to get a signatur pad to work.

I managed to make it work with the mouse no issue with a piece of code I found here: http://demos.ijasoneverett.com/html5-sigpad.php

However it does not seem to work on mobile devices, I do not understand why since I have added the event listeners

canvas.addEventListener("touchstart", mouseDown, false);
canvas.addEventListener("touchmove", mouseXY, true);
canvas.addEventListener("touchend", mouseUp, false);

Here is my all jQuery:

$(document).ready(function () {
    //User Variables
    var canvas = document.getElementById('canvas');  //canvas element
    var context = canvas.getContext("2d");           //context element
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;

    canvas.addEventListener("mousedown", mouseDown, false);
        canvas.addEventListener("mousemove", mouseXY, false);
        document.body.addEventListener("mouseup", mouseUp, false);

        //For mobile
        canvas.addEventListener("touchstart", mouseDown, false);
        canvas.addEventListener("touchmove", mouseXY, true);
        canvas.addEventListener("touchend", mouseUp, false);
        document.body.addEventListener("touchcancel", mouseUp, false);

    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height); // Clears the canvas

        context.strokeStyle = "#000000";  //set the "ink" color
        context.lineJoin = "miter";       //line join
        context.lineWidth = 2;            //"ink" width

        for (var i = 0; i < clickX.length; i++) {
            context.beginPath();                               //create a path
            if (clickDrag[i] && i) {
                context.moveTo(clickX[i - 1], clickY[i - 1]);  //move to
            } else {
                context.moveTo(clickX[i] - 1, clickY[i]);      //move to
            }
            context.lineTo(clickX[i], clickY[i]);              //draw a line
            context.stroke();                                  //filled with "ink"
            context.closePath();                               //close path
        }
    }

    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

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

    function mouseUp() {
      paint = false;
    }

    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 - 40);
            draw();
    }

    //Clear the Zig
     document.getElementById("clearSig").onclick = function () {
          clickX = new Array();
          clickY = new Array();
          clickDrag = new Array();
          context.clearRect(0, 0, canvas.width, canvas.height);
          $("#imgData").html('');
    };
});

Answers


To get correct value of pageX and pageY you have to use e.touches(e.changedTouches) for mobile devices. For example:

function mouseXY (e) {
     var touches = e.touches || [];
     var touch = touches[0] || {};
     if (paint) {
         addClick(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop - 40, true);
         draw();
     }
}

See more about it on https://developer.mozilla.org/en-US/docs/Web/API/Touch_events


Need Your Help

Create Jar file with IntelliJ IDEA that has mysql database

java intellij-idea executable-jar

I want to create (export) my application into a Jar file to be portable.

com.sun.xml.ws.client.ClientTransportException: HTTP transport error: java.lang.ClassCastException

java web-services soap

I am currently trying to call a JAX-WS from a Weblogic 12c and Java 7 environment. I've generated the client stubs using the weblogic client generator plugin from maven, specifically: