0

I implement the signature pad (https://github.com/szimek/signature_pad) in my laravel project. It works fine on desktop. When I try to use this in mobile I can't draw anything.

I test the demo example on mobile and works (http://szimek.github.io/signature_pad/) .

I think my problem could be with canvas resize.. In meta viewport I add this:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

My jquery code is that:

var wrapper = document.getElementById("signature-pad");

    var canvas = wrapper.querySelector("canvas");
    var signaturePad = new SignaturePad(canvas, {
      backgroundColor: 'rgb(255, 255, 255)'
    });

    // Adjust canvas coordinate space taking into account pixel ratio,
    // to make it look crisp on mobile devices.
    // This also causes canvas to be cleared.
    function resizeCanvas() {
      // When zoomed out to less than 100%, for some very strange reason,
      // some browsers report devicePixelRatio as less than 1
      // and only part of the canvas is cleared then.
      var ratio =  Math.max(window.devicePixelRatio || 1, 1);

      // This part causes the canvas to be cleared
      canvas.width = $('#signature-pad').width();
      canvas.height = '250';
      canvas.getContext("2d").scale(ratio, ratio);

      signaturePad.clear();
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

And my html code:

      <div id="signature-pad" class="signature-pad">
        <div class="signature-pad--body">
          <canvas width="100%"></canvas>
        </div>
        <div class="signature-pad--footer">
          <div class="description">Sign above</div>

        </div>
      </div>

What kind of problem could it be?

user3242861
  • 1,839
  • 12
  • 48
  • 93

1 Answers1

1

Try adding:

canvas.addEventListener( 'touchstart', onTouchStart, false);

It solved some problems with canvas on mobile:

Edited with snippet:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


can.addEventListener( 'touchstart', onTouchStart, false);

function onTouchStart(e) {
 ctx.fillRect(0,0,300,300);   
    
}
<canvas id="canvas1" width="500" height="500">
</canvas>

It paints a large black rectangle when on touch event to confirm that it works

JoelBonetR
  • 1,551
  • 1
  • 15
  • 21