Signature Rendering Issue with Stylus on Touchscreen Devices (Microsoft Surface)

[margus-roskrut]

Summary

When using a stylus (e.g., Surface Pen) on a touchscreen device like the Microsoft Surface, lines are not consistently rendered on the canvas. The pen input is detected (events fire), but strokes fail to appear visually or appear inconsistently.

Affected Package

react-signature-canvas: ^1.1.0-alpha.2
Internally depends on signature_pad: ^2.3.2
✅ Issue resolved in signature_pad >= 5.0.7 (tested with this version)

Device and Environment

• Device: Microsoft Surface
• OS: Windows 11
• Processor: Intel i7-1165G7 @ 2.80GHz
• RAM: 16 GB
• Browser: Chrome, Edge (latest)
• Touch Support: Pen + 10-point multi-touch

Steps to Reproduce

1. Use react-signature-canvas on a Microsoft Surface or similar device with a stylus.
2. Draw on the canvas using the pen.
3. Observe: pointer events fire (verified via logs), but no lines are drawn, or drawing is inconsistent.

Expected Behavior

Lines should render smoothly and reliably when drawing with a stylus, just like with mouse or finger.

Actual Behavior

• Strokes sometimes do not appear.
• Pointer events are correctly detected.
• Issue specific to pen input with pressure sensitivity.

Cause

The issue originates in signature_pad@2.3.2, which does not handle pointerType + pressure correctly in certain pen input scenarios. This was fixed in later versions of signature_pad.

Fix Reference

Older versions of signature_pad did not handle pen input correctly when PointerEvent.pressure === 0 during the pointerdown event — a case commonly observed on touchscreen devices like Microsoft Surface. This caused _strokeBegin() to be skipped, resulting in no lines being drawn.

✅ Recommended Action: Upgrade to signature_pad@5.0.7 or later to ensure correct stylus input behavior across devices.

Suggested Fix

Upgrade react-signature-canvas to use signature_pad@^5.0.7 instead of ^2.3.2.

Video

currently: https://github.com/user-attachments/assets/0f5e5685-6fec-471d-9189-e4232b3c4761

with updated to signature_pad@^5.0.7 version: https://github.com/user-attachments/assets/b2a53289-d3f5-4915-a4bc-0fde4d53d27f

[agilgur5]

Please don't file duplicate issues... you can edit your existing one #135... You also still did not fill out the bug report template and instead seem to have AI generated a response which was not requested....

✅ Issue resolved in signature_pad >= 4.x / 5.x

This issue is no longer reproducible in signature_pad@5.0.7.

🔗 Upstream Fix: szimek/signature_pad#600

All 3 of these references say different things... Did you actually test this? For all I know, an LLM could have just hallucinated this response for you and no actual fix exists

[margus-roskrut]

Hi, just to clarify — I’ve now added videos showing how to reproduce the issue.
I initially didn’t fill out the full bug report template because I was following your request not to create a new issue (and instead update the existing one).

Let me know if you'd prefer I reformat the description using the template, or if you'd like me to submit a new issue properly filled out. Thanks!

[mihkeleidast]

Hi @agilgur5, let me help my colleague out here a little. Sorry for the small mess here.

Regarding the reproduction - just to emphasize, as far as we know, this is a device-specific issue that happens only on Microsoft Surface Pro devices when using a Surface Pen to write on the canvas. With such a device, it can be reproduced even on the official demo page. I unfortunately do not have any other touchscreen/stylus devices on hand to test whether it affects others as well. I also understand that you may not have such a device, making investigating these issues a bit complicated.

Additionally, note that it works fine in Firefox (version 139 for example), but can be reproduced in Chrome (ver 137 for example) and Edge (also tested ver 137). Makes sense that Chromium-based browsers behave differently sometimes.

---

Of course, this issue comes from upstream signature_pad package. Given that this library is in somewhat of a bind with regards to updating signature_pad, I think it's fair to report issues here that would be resolved by updating signature_pad, as it has received all kinds of updates over the years.

That said - I did manage to track the upstream fix down as well. What fixes this issue in signature_pad is this commit: szimek/signature_pad@ea1eb58. Preventing scroll in touch start seems to alleviate the problem.

If it's unfeasible to start work on updating signature_pad to newer versions, we can quite easily prevent the scroll in react-signature-canvas as well.

By adding something like this in the on method (with equivalent removeEventListener in off):

const canvas = this.getCanvas()
    canvas.addEventListener('touchstart', (e) => {
      // Prevent scrolling. Temporary fix from upstream: https://github.com/szimek/signature_pad/commit/ea1eb583abd2aa63e5faa7e582bdafbe2716524b
      e.preventDefault();
    }, { passive: false })

Naturally, this is sort of a workaround - newer signature_pad versions have other improvements as well, such as using pointer events instead, with workarounds for iOS devices: https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts#L207. Doing all of that in this wrapper is probably not doable, but would likely be appreciated by the users of this library.

Given that we can access the canvas ref externally as well, we can also add the scroll prevention on our side, for example: https://codesandbox.io/p/sandbox/magical-austin-66dpt6

That's likely what we'll be doing until this gets a more permanent fix here - just to get it working for our customers.

---

Anyways, interested to hear your thoughts on:

• whether we can start working on a plan to update signature_pad to newer versions
• whether we can add the touch scroll prevention fix from upstream in react-signature-canvas in the meantime (happy to file a PR if you OK this approach)

Thanks for the doing the hard work of maintaining open source, we do appreciate it!