Making a Signature Drawpad with Ionic

Recently I was working on some app and wanted an opportunity for the user to write something down. As I was working with the html5 canvas, I found a very good looking library which I want to show you today: The signature pad. This library allows to draw on your device, with not just a normal bold line but with a quite realistic appeal. Let’s make a simple app to test it!

Setup a simple App

I like to install those packages whenever possible through bower, as it makes managing those dependencies a lot easier. As bower will install our libs always to the same folder, we can go ahead and include the js file at the top of our index.html file:

<script src='lib/signature_pad/signature_pad.js'></script>

That’s all we need to include the signature pad library in our app!

Include the Signature Pad functionalities

To use the library, we must define a canvas element inside our index.html which will be the area for the user to draw his signature (or anything else). For this tutorial, we will just have a tiny area at the top, which has the signatureCanvas id so we can get it later in our controller. Additionally I created 2 buttons, which can clear the area or save the current content of the area. Below we have a image, which will show our last saved signature from the canvas. So go ahead and replace everything inside the body with this:

First of all, we get our canvas element through our defined id. Afterwards, we create a new SignaruePad from our canvas element. Now we can simply call functions on this element, thats all! Our clearCanvas() will, well, obviously just clear the canvas drawing area, and our saveCanvas() function gets the image data from the canvas by calling the toDataURL() on our signature pad. This info can be directly used to update our image below.

These are just some simple functions, there are some more things you can edit, which include:

dotSize – Size of dot

minWidth – Minimum size of a line

maxWidth – Maximum sizw of a line

backgroundColor – Color used when the canvas is cleared

penColor – Color of your line

onBegin & onEnd – Callback functions

Now you have everything set up, and deployed on your device your result should look like this:

Conclusion

This tutorial showed how to integrate a tiny javascript library in your Ionic app to create a drawing area for the user. This area can be used for drawing a signature or anything else you like, which can then be saved as image data and used in other areas of your app! For example, you could allow the user to send his signature or drawn image via mail to others!

If this tutorial was helpful, follow me on twitter @schlimmson and leave a comment/ tweet it!
Don’t forget to subscribe to my newsletter to receive new posts and infos via mail!

Watch a video version of this article below (sorry for loud typing and the typo error 😉 )

So long,
Simon

Get the free 7 day Ionic 4 Crash Course to learn how to:

Get started with Ionic

Build a Tab Bar navigation

Make HTTP calls to a REST API

Store Data inside your app

Use Cordova plugins

Style your Ionic app

The course is free, so there's nothing you can lose!

Success! Now check your email to confirm your subscription.

There was an error submitting your subscription. Please try again.

First Name

Email Address

We use this field to detect spam bots. If you fill this in, you will be marked as a spammer.