• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

Getting HTML5 canvas signature to work in mobile

Wondering how to get the signature part of this app

http://karrtransportation.com/employment/home/

to work when on a mobile phone, currently it just scrolls around when you try to sign.

Many Thanks!
0
Greg Alexander
Asked:
Greg Alexander
1 Solution
 
leakim971PluritechnicianCommented:
0
 
RobOwner (Aidellio)Commented:
Here's a very simple demo that you should be able to easily incorporate into your site:

http://jsbin.com/cozaxu/1/edit?js,output

<canvas id="canvas" width="683" height="200" style="width: 683px; height: 200px; border: 1px solid rgb(0, 0, 0);">Canvas is not supported</canvas>

$(function() {
  var bDraw = false;
  var old = {};
  $('#canvas').on('touchstart', function(e) {
    e.preventDefault();
    //console.dir(e.originalEvent);
    old = {
      x: e.originalEvent.touches[0].clientX,
      y: e.originalEvent.touches[0].clientY
    };
    bDraw = true;

  });
  $('#canvas').on('touchend', function(e) {
    e.preventDefault();
    bDraw = false;
  });
  $('#canvas').on('touchmove', function(e) {
    e.preventDefault();
    var _from = old;
    var _to = {
      x: e.originalEvent.touches[0].clientX,
      y: e.originalEvent.touches[0].clientY      
    };
    old = _to;
    if (bDraw) {
      draw(_from, _to);
    }
  });

});

function draw(f, t) {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(f.x,f.y);
  ctx.lineTo(t.x,t.y);
  ctx.stroke();
}

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now