How to implement Ionic Signature pad drawing in Ionic 6

We can add an Ionic signature pad example on our ionic project without and with a third-party library. In this example, we are creating simple ionic apps allowing a user to write a signature on our application. We allow a user to write a signature and save it in Base64 png and which we can save in our database as a string.

In this article, we will explore how to add signatures in our Ionic application using two different libraries. We can save the signature in base64 string format and it can be easily convertible to image. Let’s get started,

Setting up and configuring Ionic signature pad project

With the release of ionic version 4, the Ionic framework is no longer limited to angular. Ionic allows us to create ionic projects in different front-end frameworks like Angular, Vue, and React. Let’s first create a blank Ionic Angular project for our ionic signature example.

ionic start signatureApps blank --type=angular

In this example we are learning touch events, touch events interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture. Touch event will work only on devices with touch screen support and this signature will not work on the desktop browser. For drawing, signatures work perfectly on both mobile devices and desktops.

Here is a screenshot of our Ionic signature pad example

1. The TouchSmart event occurs when the user touches an element.
2. touchmove event occurs when a user moves the finger over an element – works only in touchscreen devices.

Example 1: Ionic signature Pad example using signature_pad Javascript library

We will demonstrate two examples of the Ionic signatures using different libraries. In our first example, we will use the signature_pad Javascript library to implement the Ionic signature pad example. I guess and hope our first Ionic signature pad will work perfectly in Ionic React and Vue also as both frameworks are based on Javascript. Let’s first install the signature_pad library in our project.

npm i signature_pad --save

In our home.page.html template let added canvas to draw our signature. We have two buttons one to clear the signature canvas and the other to get signature data in base64 string format. We have to define a canvas element where we are writing our signature on it. Once we have our signature in base64 we can display it as an image using the IMG element in our template.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic signature example 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" >
  <div>
    <canvas #canvas (touchstart)="startDrawing($event)" (touchmove)="moved($event)"></canvas>
    <ion-grid>
      <ion-row>
        <ion-col size="6">
          <ion-button color="danger" (click)="clearPad()">Clear</ion-button>
        </ion-col>
        <ion-col size="4" offset="2">
          <ion-button color="secondary" (click)="savePad()">Save</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <img src='{{ signatureImg }}' />
</ion-content>

Once we have our canvas element add style like border, background, and more on a canvas element. Let’s edit the home.page.scss file.

canvas {
  display: block;
  border: 1px solid rgb(187, 178, 178);
  background-color: var(--ion-color-success);
}

Edit home component typescript code to draw a signature on canvas and save in base64 formats.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import SignaturePad from 'signature_pad';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  signaturePad: SignaturePad;
  @ViewChild('canvas') canvasEl : ElementRef;
  signatureImg: string;

  constructor() { }

  ngAfterViewInit() {
    this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
  }

  startDrawing(event: Event) {
    console.log(event);
    // works in device not in browser

  }

  moved(event: Event) {
    // works in device not in browser
  }

  clearPad() {
    this.signaturePad.clear();
  }

  savePad() {
    const base64Data = this.signaturePad.toDataURL();
    this.signatureImg = base64Data;
  }

}

We can easily convert base64 to an image and in most case signature are saved as base64 string format in the database, so that we can modify and display them easily using img tag in our template.

Example 1: Ionic signature Pad example using an angular2-signaturepad library

In our second example of the Ionic signature example, we are using the angular2-signaturepad library. Let’s add our library first in our project.

npm i angular2-signaturepad --save

To use the angular2-signaturepad library, first, we need to import SignaturePadModule in our home.module.ts file as follows.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { SignaturePadModule } from 'angular2-signaturepad';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    SignaturePadModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Edit the home.page.html template to add the signature component tag and it has some event while drawing the signature on the signature component.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic signature example 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" >
  <div class="signature-container">
    <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
    <ion-grid>
      <ion-row>
        <ion-col size="6">
          <ion-button color="danger" (click)="clearPad()">Clear</ion-button>
        </ion-col>
        <ion-col size="4" offset="2">
          <ion-button color="secondary" (click)="savePad()">Save</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <img src='{{ signatureImg }}' />
</ion-content>

Edit home.page.ts typescript file to initialize our signature element and we have a few methods which are easy to understand. Like the Javascript signature library, all our signature data are saved in base64.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  @ViewChild(SignaturePad) signaturePad: SignaturePad;
  signatureImg : string;
  signaturePadOptions: Object = { 
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() { }

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }

  clearPad() {
    this.signaturePad.clear();
  }

  savePad() {
    this.signatureImg = this.signaturePad.toDataURL();
  }
}

Conclusion
We have completed two examples of drawing signatures in our Ionic application using a third party and we can also create signatures without any library. All signature data are saved in base64 format and we can easily display it in our template using img tag and we can convert base64 to an image file also.

Related posts

• How to implement an ionic slider
• Complete guide on an ionic grid with an example
• How to implement an ionic alert controller.
• How to implement an ionic table with pagination.
• How to use the ionic skeleton component.
• How to create a different ionic list.