search

agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://agilgur5.github.io/react-signature-canvas/
Other
545 stars 119 forks source link

Width and Height change cause de-sync #41

Closed liljosi closed 4 years ago

liljosi commented 4 years ago

If you change the height and width using a css class it just zooms in the canvas and the pointer is defaced, but when you change it using the width and height props it works correctly, but clears the canvas every time i change the size when i implement a onMouseOver and onMouseOut.

agilgur5 commented 4 years ago

If you change the height and width using a css class it just zooms in the canvas and the pointer is defaced

I'm not sure what you mean by "pointer is defaced", the demo uses a CSS class and does not set width or height props. CSS does scale the rendered area, but this is not necessarily problematic. I don't know how you're using it, as you did not provide a reproduction. If you're changing the size though, that will distort the Canvas; it's not really meant to be resized, as per the below

clears the canvas every time i change the size

This is behavior of the Canvas API, and not specific to react-signature-canvas (or signature_pad). When the canvas's size is changed, it clears all content per the Canvas API spec, which states (emphasis mine):

When the user [...] set[s] [...] width and height, it must run these steps: [...]

  • Resize the output bitmap to the new width and height and clear it to transparent black.

There is a clearOnResize prop in react-signature-canvas, but that is related to window resizes, which does not seem to be the topic of your issue. You didn't include a reproduction though