it's possible to draw outside the box, when mouse is not released

[laDanz]

Do you want to request a feature or report a bug?
BUG

What is the current behavior?
On a mobile device (I use ASUS VivoTab Note 8 (Windows 10 Home Version 1511) with Chrome 58.0.3029.96) you can draw outside the box if you begin the signature within the canvas (using your finger), and then leave the canvas(while still holding the finger down) and eventually re-enter the canvas and moveup the finger.
SignaturePad will collect data making the resulting points/svg/... exceed the given bounds.

Please see the screenshot, made with this fiddle: https://jsfiddle.net/t2kbbr4j/

What is the expected behavior?
I would expect that the SignaturePad behaves like in the non-mobile version, where you cannot draw outside the box.

Which versions of SignaturePad, and which browser / device are affected by this issue? Did this work in previous versions of SignaturePad?
Tablet: ASUS VivoTab Note 8 (Windows 10 Home Version 1511)
Browser: Chrome 58.0.3029.96
SignaturePad: v2.1.1
Did this work in previous versions of SignaturePad? I don't know.

[szimek]

Uh, I'll try it out on Android tablet (I don't have a Windows one) and see if I can replicate it. If it really does return points outside of the canvas, I guess I'll have to check if coordinates are inside a canvas (i.e. are not negative and not higher than canvas dimensions)...

The previous versions of signature-pad (prior to 2.0.0) didn't return point coordinates, so it could be broken before, but wasn't visible.

[arnoldmanzano]

Confirmed seeing this issue. Observed in Android 6/7 and iOS safari.
Able to re-create it by using Chrome dev-tools Device toolbar emulating a mobile-touchscreen device.

[szimek]

I don't have that much time work to on this library, so it would be great if someone could create a PR with a fix for this issue.

Maybe it would be enough to simply check if point coordinates are outside of the canvas (i.e. smaller than 0 or greater than height/width of the canvas), or maybe it would result in some strange curves being drawn...

[arnoldmanzano]

Hi szimek, created a PR for this #324. Your suggestion seems to work well.

[UziTech]

closing as stale

[SamuelWillis]

Bumping this issue as I am still able to replicate this on touch screen devices. Non touchscreen devices seem to blend the line within the canvas fairly well, however.

Here's a little demo video:

Screen.Recording.2022-08-09.at.2.54.51.PM.mov

[MarouaneSH]

@SamuelWillis did you manage to fix this issue ?

[SamuelWillis]

@MarouaneSH unfortunately not.

[UziTech]

#703 is an attempt to fix this but I haven't had time to get it completely working and write tests. The issue is that it doesn't work in all browsers because they have different definitions of enter and leave for the events.

Unfortunately the solution will probably have to be browser specific.