DEV Community

Create a signature pad in React

Maher Alkendi on September 06, 2019

I was recently asked by a client to build a form that allows users to sign using a wireless pen mouse. The goal of the client was to obtain user si...
Collapse
 
remibruguier profile image
Rémi BRUGUIER

Thank you, I'll use that on a side project i'm working on :)

Collapse
 
ma7eer profile image
Maher Alkendi

Glad you liked the article:)

Collapse
 
elcho profile image
elcho

I was just about to start researching implementing a signature pad using create-react-app, and react hooks with state. I chanced on your article and BAM! create-react-app, react hooks, saving ... Thanks!

Collapse
 
ma7eer profile image
Maher Alkendi

Glad I was able to help! :]

Collapse
 
amitshahc profile image
Amit Shah

Excellent help.
but you are missing .current in your this line code
signCanvasStaff.current.getTrimmedCanvas().toDataURL("image/png")

Collapse
 
more03625 profile image
Rahul More

Thanks man :)

Collapse
 
andrewi16 profile image
Andrew Irwin

Thank you, fantastic Article learned a lot! Thank you very much from Ireland! :) ☘

Collapse
 
ma7eer profile image
Maher Alkendi

Thank you for the kind words! glad you found this helpful :]

Collapse
 
pelumiv_d profile image
SuperV NLa

Thanks for the tutorial.

Collapse
 
ma7eer profile image
Maher Alkendi

Thanks for checking it out! :D

Collapse
 
jacobgc profile image
Jacob

Wonderful article!

Collapse
 
ma7eer profile image
Maher Alkendi

Thank you Jacob :)

Collapse
 
monfernape profile image
Usman Khalil

Looks promising. Thanks for introducing this library

Collapse
 
ma7eer profile image
Maher Alkendi

You are welcome:)

Collapse
 
hawicaesar profile image
HawiCaesar

This is great!

Any idea on how to make a a user type into some input fields and that draws a signature (with a font type) on the canvas as the user type

Collapse
 
ma7eer profile image
Maher Alkendi

Created a little demo because I was curious.

codesandbox.io/s/quizzical-bartik-...

Check it out and let me know if this is what you are talking about

Collapse
 
ignore_you profile image
Alex

Nice, thank you for your post! Do you have any ideas how I can manage canvas overflow? I.e. client signs on screen and his signature runs off canvas.

Collapse
 
bhargaveverestek profile image
BhargavEverestek

how can we add default or background image?

Collapse
 
danielsogbey_19 profile image
Daniel Sogbey

In the save method,

It should be
sigCanvas.current.getTrimmedCanvas().toDataURL()

current must be added.

Collapse
 
satyavardhan626 profile image
satyavardhan • Edited

how to pass base64 data to react-signature-canvas?

i am having a case like edit ....There i have to show signature which i have given and i have to provide edit signature option.