locked
Canvas finger responsive RRS feed

  • Question

  • User-1901014284 posted

    Hi,

    I have a canvas that I use to save signatures into a database. This works with no issues when I use a mouse but I have attempted to use my finger (using a mobile device) and also a signature pad and pen but the canvas does not seem to respond very well to the signature pad and not at all when using my finger on the mobile device. Is there a way to get the canvas to recognise the pad and finger? please see below code within my HTML.

    HTML Code:

    <canvas id="can" class="auto-style9" style="border: 2px solid;" runat="server" visible="true"></canvas>
    <input id="Hidden1" type="hidden" visible="false" />
    <asp:HiddenField ID="signatureBase64Url" runat="server" Value="" ClientIDMode="Static" />

    <script>

    var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;
    var x = "black",
    y = 2;
    function init() {
    canvas = document.getElementById('Main_can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function (e) {
    findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
    findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
    findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
    findxy('out', e)
    }, false);
    }
    function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
    }

    function save() {
    var dataURL = canvas.toDataURL();
    document.getElementById("signatureBase64Url").value = dataURL;
    }

    function findxy(res, e) {
    if (res == 'down') {
    prevX = currX;
    prevY = currY;

    var rect = canvas.getBoundingClientRect();

    currX = e.pageX - rect.left;
    currY = e.pageY - rect.top;

    console.log("PageCoords: " + e.pageX + ", " + e.pageY);
    console.log("Offsets: " + canvas.offsetLeft + ", " + canvas.offsetTop);
    console.log("Curr: " + currX + ", " + currY);

    flag = true;
    dot_flag = true;
    if (dot_flag) {
    ctx.beginPath();
    ctx.fillStyle = x;
    ctx.fillRect(currX, currY, 2, 2);
    ctx.closePath();
    dot_flag = false;
    }
    }
    if (res == 'up' || res == "out") {
    flag = false;
    save();
    }
    if (res == 'move') {
    if (flag) {
    prevX = currX;
    prevY = currY;
    var rect = canvas.getBoundingClientRect();

    currX = e.pageX - rect.left;
    currY = e.pageY - rect.top;
    draw();
    }
    }
    }

    $(document).ready(function () {
    init();
    });

    </script>

    Any help would be greatly appreciated.

    Many thanks

    Jonny

    Tuesday, October 2, 2018 2:26 PM

All replies