Giters

agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad

Home Page:https://agilgur5.github.io/react-signature-canvas/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Canvas resize causes de-sync when clearOnResize=false

francos opened this issue · comments

commented

Hi,

I'm trying to use your library but I'm having 2 issues:

  1. The line appears to the right of where the mouse is when adding a signature.

  2. When resizing the browser window, the canvas takes over the whole screen and then breaks.

Is there any way to fix these issues?

commented

You did not provide any reproduction so it is difficult to really say much.

  1. The line appears to the right of where the mouse is when adding a signature.

Sounds like a de-sync issue meaning you've set clearOnResize to false and are not properly handling the resize. Duplicate of #43, see my in-depth explanation there for more information

2. When resizing the browser window, the canvas takes over the whole screen and then breaks.

This component's dimensions are entirely based on the width and height you set it to; if a dimension isn't fixed then it is responsive and resizes proportionally.
Sounds like your dimensions aren't fixed and don't work for the screen sizes you're targeting. You might want to set different dimensions for various breakpoints, but that's out-of-scope -- that's behavior of your code, not this component.

If you have a big resize with clearOnResize=false, then by "breaks", you're probably experiencing a significant de-sync given the scope of the resize and just not seeing where things get drawn. As above, please refer to #43

commented

Thanks for the quick answer and sorry for the late response @agilgur5.

In the end, I could fix this by setting a width of 100% and a specific height in px to the canvas through the canvasProps.