Signature_pad: Improve drawing quality

This is a quick and dirty experiment I made last summer. The idea is to smooth the path with a function over a moving window. The window is set in the code but could be adjusted based on speed. For simplicity I used a fixed pen width.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

cl.

@claudiorivetti That's really awesome! I'll check it out. I remember one of Google drawing apps was using the same solution. However, the strange thing about iMessage is that the lag is no longer than in this library...

If you use a finger to draw, instead of a stylus, the touch point is pretty wide (for sure wider than one pixel) and I'm not really sure how mobile apps or browsers actually figure out the exact coordinates of touch events in such case. Maybe it would be possible to somehow adjust the coordinates received by the browser based on coordinates of the previous points and current speed and not only interpolate paths between them. I'm not sure if it makes any sense or if I'll have time to experiment with it. I'd have to make the points visible to see if the curves themselves could be improved or if points are not along the "ideal" lines.

@claudiorivetti That's beautiful, how can I obtain such magic? :) Admittedly it would have to be a little bit more realistic, either entirely dynamically, or just maybe just a thicker line would maybe suffice.

Most people I observed write slow for some reason and it looks rather like from the 90s. I just can't get rid of the harsh corners by tweaking the SignaturePad input parameters:

(PS: It doesn't matter whether on Desktop, iPhone, with a tablet pen or just a finger. It always looks the same. The canvas is 1200x600 pixels at scale 3,3 (so, 400x400px). I don't think the resolution is the problem)

What strikes me is that other libraries don't have dynamic width at all, but generally appear "cleaner" to me. E.g compared to the image I posted above.

supersignature auto-fixes the curves

jSignature) is a bit more shaky, but still not pixelish.

@halo I'd like to avoid post-processing/auto-fixing, though I agree that the results are usually much nicer. The thing is that, at least in iMessage, it is possible to have smooth lines without any noticeable post-processing. There are a few things I'd like to try, e.g. skip points that are too close to the each other. Throttling has been added recently, but if someone draws really slowly, it won't help a lot.

Another thing is that I don't use this library anymore, so unless I find some example how to provide smoother lines (just like I did with posts by Square) I don't think I'll have a lot of time to investigate it myself.

@halo I did a quick experiment, where I'm skipping a point if it's too close to the previous one. It seems to improve drawing quality when one is drawing very slow, but introduces a noticeable lag. Still pretty far from what's possible in iOS iMessage or Notes apps though :/ The demo is available at http://signature-pad.surge.sh/ and you can try to change signaturePad.minDistance value to see how it impacts the drawing. The default value is 5, which means that if the previous point is closer than 5px to the new one, the new one is skipped.

Also, I added a timing using performance.now to #_updateStroke function (not present in the demo) and, unless there's something async going on or I messed something up, it looks like it takes less than 1 millisecond to add a point and draw a curve. It means there's plenty of time to do more fancy processing.

I will very gratefully try this out in production with real users and give you feedback. Do you have a branch on Github or a dist file I can use?

I like the approach, thank you very much for giving it a try.

EDIT: I reckon I can just use http://signature-pad.surge.sh/js/signature_pad.js

@halo If you'd like to build your own version (e.g. minified), I just pushed it to https://github.com/szimek/signature_pad/tree/improve-drawing-quality branch.

Thank you, I just took the compiled one from the demo page and deployed it to production. Will let you know how it's being received in the next 1-3 weeks.

@halo & @szimek - take a look on this two links, it can be helpful

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@fa-at-pulsit Thanks! However, both examples simplify the path after user stops drawing it, which I'd like to avoid. Maybe I'll give up at some point and just go with this solution, but I hope it's possible to get better results without noticeable latency.

I'd like to avoid post-processing/auto-fixing

Just out of curiosity, why is that?

• [ ] Keeping the code simple and robust, avoiding bugs
• [ ] Not messing up end-user experience with visual glitches
• [ ] Lock-in that prevents e. g. exposing drawing stream while writing
• [ ] Existing post-procesisng solutions are not mature enough

By the way, from the subjective feedback I received from end-users over the past week, I can tell that drawing quality has immediately been apprehended as "has clearly improved" (by regularly recurring signers). I'll see if I can get some more meat to the bone, yet I will not be able to expose real-world signatures here for comparison.

All I can say is that most people write ridiculously slow and small, now matter how much you tell them. ;) Also, I suspect the device (Surface Pro) to be a major culprit. At some point using an iPad with one of those fancy new pens may give me more insight into that.

@szimek this other example simplified the path on the fly (i think so)
take a look on this video https://www.youtube.com/watch?v=H79iUsai6uc
sources -> https://github.com/eur00t/Effective-Curve-Fitting
and i get much better effect on retina with canvas resizing like
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit Thanks! I played a bit more with iMessage app and (probably thanks to my super slow iPhone 5) I noticed that it does post-processing on the fly as well, but it's very subtle and barely noticeable.

I have to release a new version with some bug fixes first, but then I'll try to release a new version with optional skipping points that are too close to each other and then look into this on the fly post-processing - it looks really promising.

So, after 1.5 months in production, I can confidently say that the quality has greatly improved by this PR. Several dozen people have signed again and again and it looks much better compared to what their signatures looked like before.

I have to release a new version with some bug fixes first, but then I'll try to release a new version with optional skipping points that are too close to each other

Hi! Are you going to need backwards compatibility? Or is it just this commit as it is?

EDIT: My bad, it's already merged in via this commit right? Thank you indeed!!

Is there any way to improve the draw speed?