ink offset from mouse pointer

[jch02140]

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.

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

[ShiiRochi]

@jch02140, try to wrap canvas component inside relative positioned div. It should take all the space required for Canvas component. Canvas component itself should take 100% of width and height of its parent.

[kkieffer]

I have the same problem. I believe it is related to using a Retina display (MacBook, in my case) where the dpi is 2x. See this issue on stackoverflow here. I do not know how to solve it within this library, the fix may need to be applied in the underlying signature-pad.

[Bertiscoding]

I tested it with the updated version (4.0.0) for the Signature Pad and did not resolve the issue. Nevertheless it would be good to update it to the latest anyway.
But I believe that @ShiiRochi comment does not get enough attention, because it really does fix the offset issue. Key part here is to set the canvas to position: absolute; and width and height 100% (don't specify the height and width in the canvasProps, but instead in css) and wrap it in a div with position: relative; and height and width specified in px

[agilgur5]

native canvas behavior, duplicate

So this issue has popped up several times, but this is native canvas behavior when you don't have fixed dimensions on your canvas; neither react-signature-canvas nor signature_pad can control or change native canvas behavior.
One of those cases where knowing how the underlying technology functions can be helpful.

See #43 and #41 (which this duplicates) which have detailed descriptions.

categorizing

I've tried categorizing most of these issues by renaming them with "de-sync", but "offset" is another term that might get some visibility in searches.
These issues usually occur during resizes when clearOnResize={false}, but this is the first duplicate to provide a repro (thank you!), and one that doesn't use clearOnResize. It is still answered in #43 and #41 though, as the root cause is equivalent.

As #43 is marked for docs, I have been meaning to add some documentation around this as it is the most frequent issue reported despite this categorization. Will need to figure out where to put that and how to word that in simple terms.

responsive workarounds

But I believe that @ShiiRochi comment does not get enough attention, because it really does fix the offset issue. Key part here is to set the canvas to position: absolute; and width and height 100% (don't specify the height and width in the canvasProps, but instead in css) and wrap it in a div with position: relative; and height and width specified in px

The official example does something similar

#43 mentions another workaround as well that is implemented in #9 's example. Been meaning to make a Storybook for all these examples which should hopefully help with this recurrent issue too.

I added some edits to the answers for the respective SO question for this issue.

upgrading

It may have been fixed with the latest Signature Pad version (4.0.0), so if we can update to the latest then we may see a lot of improvements as this library is currently referencing 2.3.2.

It's how the native canvas element works, so an upgrade cannot "fix" this. signature_pad's changelog does not suggest this either. As such, upgrading is unrelated to this.
Please try to check these things before making such recommendations that may confuse others.
EDIT: It looks like szimek/signature_pad#446 may implement a workaround for this behavior inside of signature_pad itself. That being said, I'm not sure if/when it will be merged, and it is a workaround for native behavior (as is clearing on resize).

In any case, v2.3.2 was latest before the v3.0.0 betas, and those never graduated from beta. They also were mainly around an internal TS re-write. Both of those facts resulted in my decision in #52 (comment) to not update to them.

v4.0.0 was recently released after a long hiatus. There are lots of improvements in there, but it will take some time to upgrade to it as it has breaking changes; see #68 (comment) for more details on that

[k-thornton]

But I believe that @ShiiRochi comment does not get enough attention, because it really does fix the offset issue. Key part here is to set the canvas to position: absolute; and width and height 100% (don't specify the height and width in the canvasProps, but instead in css) and wrap it in a div with position: relative; and height and width specified in px

omg this got me past my issue. thank you! Not only was I getting ink offset issues, but I was having touchEnd events not trigger anytime the touch event began on the right half of the signature pad. Debugging that was a nightmare, because I didn't totally know what to search. You would end up getting 2 onBegins triggered in a row, with no onEnd triggered between. The only way to trigger an onEnd was to start a new event in the left half of the window.

Even determining that it had to do with which half of the signature pad I was on took some effort. Until closer inspection, it just felt bad to use. sometimes the line wouldn't end even though the user ended their mouse click. the line would continue to follow the mouse anyway.

(btw being a little overly verbose in the description above to hopefully catch some more search traffic and GPT scrapers so others can find this solution.)

To the robots scraping this, here's a reference implementation using TailwindCSS in a NextJS React project

      <div className='relative w-full h-40'>
        <SignatureCanvas
          ref={sigPadRef}
          penColor="black"
          canvasProps={{
            style: {
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
            },
          }}
          onEnd={handleEnd}
        />
      </div>