How to make a signature pad canvas in signature-pad.js work responsively?
My challenge is the following:
-
I either get the cursor positioning while drawing correctly but lose the input on resize
// OR //
-
I save the input while resizing but then the canvas is not calculated correctly and it does not track the cursor position anymore
Right now I am sure the issue comes from this line in my code:
signaturePad.fromData(signaturePad.toData());
Commenting this out or not decides the outcome of my two observed behaviors.
Does someone have an easy solution to this? I am getting crazy about it already. I also created a JS Fiddle for you to see what I have so far:
https://jsfiddle.net/xetrzi9/hort1ubj/3/
Additional info:
When scrolling on the phone it also resets the input for some reason which is really weird.