ionic framework Making a Signature Drawpad

ionic framework Making a Signature Drawpad


Ionic Framework Making a Signature Drawpad  today discussed this task is 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!

ionic framework Making a Signature Drawpad
ionic framework Making a Signature Drawpad


Setup a simple App



ionic start devdactic-signature blank
cd devdactic-signature
bower install --save signature_pad
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>

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:

<body ng-app='starter' ng-controller='SignatureCtrl'>
 
    <ion-pane>
      <ion-header-bar class='bar-calm'>
        <h1 class='title'>Devdactic Signature Drawpad</h1>
      </ion-header-bar>
 
      <ion-content class='has-header padding' scroll='false'>
          <canvas id='signatureCanvas' width='300' height='180' style='border: 1px solid black;'></canvas>
          <div class='button-bar'>
              <a class='button button-energized' ng-click='clearCanvas()'>Clear</a>
              <a class='button button-balanced' ng-click='saveCanvas()'>Save</a>
          </div>
          <br>
          <img ng-src='{{signature}}'/>
      </ion-content>
    </ion-pane>
  </body>
We have now defined everything we need inside our index, now we will create the controller which will use the signature pad functionality. Open your app.js and add this:

.controller('SignatureCtrl', function($scope) {
    var canvas = document.getElementById('signatureCanvas');
    var signaturePad = new SignaturePad(canvas);
 
    $scope.clearCanvas = function() {
        signaturePad.clear();
    }
 
    $scope.saveCanvas = function() {
        var sigImg = signaturePad.toDataURL();
        $scope.signature = sigImg;
    }
})
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


ionic framework Making a Signature Drawpad Developerinvention 5 of 5
ionic framework Making a Signature Drawpad Ionic Framework Making a Signature Drawpad  today discussed this task is Recently I was wor...

Share this

Related Posts

Previous
Next Post »

5 comments

comments
7 March 2017 at 04:54 delete

Hi, thanks for your great tutorial. Now I can draw and save the signature into file. But I don't know how to add textfield that allows signer to input their full name and drag it under their signature. Like the "Markup" feature on iOS. Any suggestion much appreciated. Thanks.

Reply
avatar
3 March 2018 at 20:36 delete

how anyone can perform undo() operation on canvas

Reply
avatar
20 June 2018 at 14:39 delete


Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
ionic training in chennai

Reply
avatar

Xolo Offer