1

I have implemented a digital signature on the site. In the browser, everything works fine. The problem occurs when switching to the mobile view. Tested in the emulator Chrome and mobile devices. For some reason the line is drawn at a distance from the cursor. This causes the line to be drawn outside the canvas and signaturePad.isEmpty() returns false. The result is an empty signature. Can someone come across similar?

Sergey Panarin
  • 11
  • 2

2 Answers2

0

https://github.com/szimek/signature_pad#handling-high-dpi-screens

Following this documentation worked for my application.

function resizeCanvas() {
  var ratio =  Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
  signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();
jhays
  • 76
  • 5
  • Yes, it works well on a web page. But when switching to a mobile view, the problem is not solved – Sergey Panarin Aug 08 '18 at 06:26
  • If you set the viewport would that fix it? ``. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag – jhays Aug 08 '18 at 16:23
  • 2
    The problem is solved. The reason was in the property css ZOOM – Sergey Panarin Aug 10 '18 at 13:49
  • 1
    I'm also facing this issue. But I need "zoom"/"tranform" property to view the whole image in mobile view that already drawn in desktop. could you please give any solution for it ? – user10269224 Dec 28 '19 at 10:00
0

I had to do the resize canvas logic in a method that I executed with a window.setTimeout. I only delayed 50 milliseconds but by then the scaling was always correct.

Leonard Faust
  • 1