Getting HTML5 canvas signature to work in mobile

Posted on 2014-12-19
Medium Priority
Last Modified: 2015-12-02
Wondering how to get the signature part of this app


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

Many Thanks!
Question by:Greg Alexander
LVL 83

Expert Comment

ID: 40510999
LVL 43

Accepted Solution

Rob earned 2000 total points
ID: 40511224
Here's a very simple demo that you should be able to easily incorporate into your site:


<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) {
    old = {
      x: e.originalEvent.touches[0].clientX,
      y: e.originalEvent.touches[0].clientY
    bDraw = true;

  $('#canvas').on('touchend', function(e) {
    bDraw = false;
  $('#canvas').on('touchmove', function(e) {
    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");

Open in new window


Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

586 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