Problem with react-signature-canvas (offset ink)

Question

I am having trouble with react-signature-canvas. I am able to get the signature pad working using Material UI Modal. However, I noticed that the ink is offset from the mouse pointer. I see there was another thread with the same problem I am facing but it seems the user is not using React....

Here is the link to the codesandbox with the offset ink problem replicated. How do I fix it?

https://codesandbox.io/s/signature-pad-demo-lsqyu?file=/demo.js

Answer 1

This happens because the inner <canvas> element has default width and height, but parent elements stretch it. This worked for me:

const styles = () => ({
  container: css`
    margin: 0 auto;
    height: 300px;
  `,
  sign: css`
    width: 100%;
    height: 100%;
  `
});

<div className={styles.container}>
  <SignatureCanvas
      canvasProps={{
        className: styles.sign
      }}
  />
</div>

Answer 2

I think this may be because you are on a Retina display with a dpi of 2x. In my case, the ink offset from the pen is correct at the upper left corner but then scales by 2x from wherever the pen moves. Thus the pen at the center of a square will have the ink at the bottom right.

One way to solve this is to make the canvas a fixed size, but that is less than ideal.

Answer 3

I had the same issue and managed to fix it in the following way:

Wrap the SignatureCanvas component in a div and assign these CSS styles to that wrapper (width and height are arbitrary, just don't use %):

.signature-wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}

and to the SignatureCanvas component itself pass:

.signature {
  position: absolute;
  width: 100%;
  height: 100%;
}

Don't assign width and height in the canvasProps. This way you don't have the offset no matter the screen size or resolution.