Solved

Getting HTML5 canvas signature to work in mobile

Posted on 2014-12-19
4
115 Views
Last Modified: 2015-12-02
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
Comment
Question by:Greg Alexander
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40510999
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40511224
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now