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
 
monfernape profile image
Usman Khalil •

Looks promising. Thanks for introducing this library

Collapse
 
ma7eer profile image
Maher Alkendi •

You are welcome:)

Collapse
 
pelumiv_d profile image
SuperV NLa •

Thanks for the tutorial.

Collapse
 
ma7eer profile image
Maher Alkendi •

Thanks for checking it out! :D

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
 
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
 
jacobgc profile image
Jacob •

Wonderful article!

Collapse
 
ma7eer profile image
Maher Alkendi •

Thank you Jacob :)

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
 
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.

Collapse
 
danielsogbey_19 profile image
Daniel Sogbey •

In the save method,

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

current must be added.