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

Hi. Yes it is working... But the ink is offset from the mouse pointer. When I draw with my mouse, the ink actually appears somewhere away at the lower right side from the actual mouse pointer. the ink should be where the mouse pointer pointing... You can see another demo but without the offset issue: https://codesandbox.io/s/react-signature-canvas-example-xevhz?file=/src/App.js:12-35 I am not sure why my code would have that offset issue... — Blazer Jack, Jun 18 '21 at 02:11

Stanislav Sapogov · Answer 1 · 2021-07-14T11:34:21.097

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>

edited Jul 14 '21 at 11:34

answered Jul 14 '21 at 11:05

Stanislav Sapogov

11
2

score 0 · Answer 2 · answered Nov 14 '21 at 20:01

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.

score 0 · Answer 3 · edited Feb 06 '22 at 17:24

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.

Problem with react-signature-canvas (offset ink)

3 Answers3