Signature_pad Problem in Mobile

[amine-damani]

Hello, I have made an Web site by using your library, so I would like to say Thank u for making this library.
Now the problem is that when we draw signature and move finger up or down, out of pad the signature is
removed

[szimek]

I'm not 100% sure why it happens, but most likely you're listening to resize event, right? You can add some logging there to see if it's fired when you scroll the screen.

If it is fired on scroll, then you can listen to other events like orientationchange, which won't be triggered when scrolling. Or you can check the solution proposed here: https://stackoverflow.com/a/24212316/261673.

Let me know if it helps.

[amine-damani]

not in resize, i draw signature and move finger up or down, out of pad the signature is removed.
Look this : https://youtu.be/k-W2Y4KKU04

[szimek]

But the code in the demo page is listening to resize event and when it happens it resizes the canvas, which causes it be cleared.

You can fix it in these 2 ways I mentioned:

• listen to orientationchange event instead of resize
• check if width has actually changed when resize even is fired and don't do anything if it hasn't

[amine-damani]

Thank you @szimek for your help
it's work fine. 👍

[santosh-btc]

@zoldek As I understand, as per the docs browser will clear the canvas on resize event automatically. Now even i have replaced the resize with orientationchange it is still not working. I doubt that when we scroll up in mobile it actually move the address bar in and which could fire the resize event, is it possible?

It's not working for me on iPhone 7+, can you please put some more light what steps you followed to fix this?

[szimek]

@santosh-btc Could you add console.log call to your resize or orientationchange event handler and see to see if it's triggered when scrolling? This should tell you when your handler is executed.

[santosh-btc]

@szimek "resize" event execute when scrolling.

[szimek]

@santosh-btc So if orientationchange event is not fired on scrolling, move your canvas resize logic there. It should fix your problem.

[ParthBarot-BoTreeConsulting]

@szimek I think what @santosh-btc is mentioning is related to the other library which we are using for ReactJS frontend. It is mentioned there that A signature pad implementation for react., but when we reviewed the internal code we found it is not using your library.

Though, if you have any suggestions on it, would be great. I have raised an issue in there.

[amine-damani]

Hi @santosh-btc
Try this :

var windowWidth = $(window).width();
$(window).resize(function(){
if ($(window).width() != windowWidth) {
window.onresize = resizeCanvas;
resizeCanvas();
}
});
window.orientation = resizeCanvas;
resizeCanvas();

It works for me
when you in the phone listen to orientationchange
when you in the desktop listen to onresize

[ParthBarot-BoTreeConsulting]

@zoldek Yep, got the same thing, updated the other issue as well. Basically now we need to identify if the device is mobile or not. Can we do that just by window.width and comparing it against actual device sizes?

[amine-damani]

@ParthBarot-BoTreeConsulting what's your problem exactly ?

[ParthBarot-BoTreeConsulting]

@zoldek The problem is, I need my ReactJS app to work diff. in Web vs Mobile, and I am using https://github.com/blackjk3/react-signature-pad . - As you mentioned it needs to register for diff. events. I am thinking of doing it by checking the window width, like,

...
if(window.width() > 300){ //This will be compared with multiple screen width/height sizes to ensure its web.
  window.addEventListener('resize', function(){ ... });
} else {
    window.addEventListener('orientationchange', function(){ ... });
}

Any ideas?

[amine-damani]

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.addEventListener('orientationchange', function(){ ... });
}
else {
window.addEventListener('resize', function(){ ... });
}

[karan4364]

@zoldek Thanks. Your solution is worked for me. You saved my day.

[thienban]

Hi, I'm using React JS for a Mobile App,
My issue is to display the Image from toDataURL.
I trigger the addEventListener in componentDidMount and Remove event listener in componentWillUnmount
But, it doesn't change anything.

componentDidMount() { if(canvas != null){ window.addEventListener('orientationchange', resizeCanvas(canvas)); } } componentWillUnmount() { if(canvas != null){ window.addEventListener('orientationchange', resizeCanvas(canvas)); } }

My images

Can you explain how to trigger the addEventListener ? please SOLVED

I solved by :

componentDidUpdate() {
canvas = document.querySelector("canvas");
if(canvas) {
signaturePad = new SignaturePad(canvas);
window.addEventListener('orientationchange', this.resizeCanvas(canvas));
if(this.state.isSigning) {
if(this.state.signatureImage)
signaturePad.fromData(this.state.signatureImage);
}
}
}

[Satya3999]

Hello there!

I'm using your library to create a signature on my website and retrieving the data in CRM. Everything works fine except for signature pad JavaScript is creating too many characters when I sign the form using my mobile application, which is in turn causing some performance issues when submitting the form, is there any way that I can reduce/restrict the number of character created by signature pad when using it in mobile application.

Thanks,
Satya