if `clearOnResize` false, CSS resize causes de-sync
fscutari opened this issue · comments
First, Thank you for your job ;)
I'm trying to develope a form that users will fill from smartphone and then sign.
I set clearOnResize to false on Signature and once I rotate the phone the signature changes size properly. If i try to add something to the signature, then the drawing happen somewhere else in the screen than expected.
Also if i clear the signature and try to write keeping the phone in this new position, the problem keep showing off.
So the de-sync issue you're describing is not a bug in react-signature-canvas or signature_pad, that's just how a canvas works. In fact, this behavior of the canvas is the reason why clearOnResize is true by default. When you set it to false, you're saying that you'll handle resizes on your own.
The root cause of the de-sync (I believe) is that your canvas doesn't have a fixed width & height and is instead responsive. That means that when the dimensions are changed, the canvas gets stretched out and distorted (can read more about that here and a bit in #41 ).
Internally, when clearOnResize is true, resizeCanvas is called to properly handle the resize so that there are no distortions. When clearOnResize is false, your canvas will get distorted upon resize unless you have a fixed width & height.
The de-sync is also detailed in #2 (comment) . lopis described a workaround in that comment and in his new example in #9 . There he uses a very large canvas with a fixed width & height along with a responsive container and some CSS to keep the signature centered.
Probably a good idea to add some docs around the caveats of setting clearOnResize to false as this comes up occasionally. It is an advanced feature, the default is set to true for a reason.
Noting here that szimek/signature_pad#446 may implement a workaround in signature_pad for this native canvas behavior.