Adding Signature Signing to My Ruby on Rails app with Signature Pad

If you are like me and you’re dabbling in a lot of different things outside of coding, you may find yourself needing your coding skills on your own business platform(s) to solve a problem.

I recently launched a new podcasting business where I write and produce audio dramas. My first podcast show required me to assemble a cast which gave me the opportunity to learn how to add a feature I’ve never needed before to the website I built for the podcasting business.

Signature signing.

All of the cast members will need to sign a Talent Release form. I wasn’t up for sending each one of them a form they could print out, sign and mail to me. I mean, this is 2020. There is no reason for that, right?

The other problem is that I also wasn’t going to pay for any service that offered document signing. Most of them wanted a monthly fee (often billed annually) and I don’t feel like I will need to use it enough to justify the cost. So of course I was forced to check the INTERNETS to see if it was something I could add to my rails app without tearing my hair out.

Yes & No.

Ok so here is the thing… I’m not a JavaScript programmer.

Whew! I feel better now that you know that! Ha!

However, I am able to install JS features if the documentation is pretty good. So I can get by. But if I have to write any kind of JS from my own knowledge or alter any JS from a tutorial that doesn’t quite fit my use case, I’m typically screwed and have to find an alternative solution.

This is what happened when I tried to install a signature gem that didn’t have a feature that I wanted. I ended up abandoning the gem for other solutions only to find myself in the same situation.

At one point I tried to use a tutorial from Drifting Ruby on how to add Signature Pad to a rails app, however it was a bit outdated and didn’t work at all. Then I tried to add Signature Pad directly from the Github repo. Well, I actually did get it to work from the Github repo and it wasn’t that hard. But what I couldn’t do was get it to save to the database.

So I was back to square one.

The very first solution I tried was a rails gem called John_Hancock. It took me mere minutes to get it working but I abandoned it because I couldn’t figure out how to add the feature to “clear” the canvas. This feature is already integrated into the code from the Signature Pad Github repo but is not a feature of the John_Hancock gem. This is what lead me to try the tutorial and the repo code.

In the end, I went back to the John_Hancock gem. Not only is it super easy to setup, it saves the signature to the database and provides a view helper to display the signature. Easy-peasy.

This is the signature canvas in the form. There is a “clear” link in the DEV version but it doesn’t work.

On a side note, I did find that someone had forked the JH gem and added the clear canvas feature. I was hoping I could fork the gem and add this feature as well but like I said, I suck at JS so I couldn’t get it together. I know just enough to tell that the forked gem was still using JQuery while the latest version of the JH gem had removed JQuery as a dependency. I don’t know enough JS to add the clear canvas feature in the latest version of the JH code.

I will figure it out at a later time so for right now if they mess up the signature (and I know they will), they’ll have to refresh the page to clear the canvas. … man, that’s silly… but so is my JS knowledge.

Version: Rails 6.0.3

UPDATE:

I checked around the INTERNETS once again and found a working solution to my “clear canvas” issue.

I forked the john_hancock gem and added the following code at the bottom of the john_hancock.js file:

function signatureClear() {
  var canvas = document.getElementById("JohnHancock-canvas");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
}

Then in my rails view, I used the following button code:

<button type="button" onclick="signatureClear()">Clear</button>

That’s it!