Ionic Signature drawing without 3rd party plugin

We can add a signature on our ionic project without and with npm package like angular2-signaturepad. In this example, we are creating simple ionic apps allowing a user to write a signature on our application without angular2-signaturepad. We allow a user to write a signature and save in Base64 png and which we can save in our database as a string.
In this example we are learning touch event, 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 touches screen support and this signature will not work on the desktop browser.

  1. The touchstart 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.

Steps 1: Create a new project
ionic start signaturePad blank

Step 2: Add the user interface in home.html,
We have to define a canvas element where we are writing our signature on it.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Ionic Canvas Signature
    </ion-title>
  </ion-navbar>
</ion-header>

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

Step 3: Add css rule 

page-home {
    canvas {
        display: block;
        border: 1px solid rgb(187, 178, 178);
    }
    .color-block {
        height: 40px;
    }
}

Step 4: Add Typescript code to draw signature on canvas and save in base64 formats.

import { Component, ViewChild, Renderer } from '@angular/core';
import { NavController, Platform, Content } from 'ionic-angular'; 
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // Canvas stuff
  @ViewChild('signatureCanvas') canvasEL : any;
  //Reference Canvas Object
  private canvasElement: any;
  //Reference the context for Canvas Element
  private _CONTEXT : any;
 
  saveX: number;
  saveY: number;
  signatureImg: any;
  
  // Make Canvas sticky at the top stuff
  @ViewChild(Content) content: Content;
  @ViewChild('fixedContainer') fixedContainer: any;

  constructor(public navCtrl: NavController, public renderer: Renderer, private plt: Platform) {
  }
 
  ionViewDidEnter() {
    // Get the height of the fixed item
    let itemHeight = this.fixedContainer.nativeElement.offsetHeight;
    let scroll = this.content.getScrollElement();
 
    itemHeight = Number.parseFloat(scroll.style.marginTop.replace("px", "")) + itemHeight;
    scroll.style.marginTop = itemHeight + 'px';
  }
 
  ionViewDidLoad() {
    this.canvasElement = this.canvasEL.nativeElement;
    this.canvasElement.width = this.plt.width() + '';
    this.canvasElement.height = 200;
  }
 
  startDrawing(ev) {
    var canvasPosition = this.canvasElement.getBoundingClientRect();
   
    this.saveX = ev.touches[0].pageX - canvasPosition.x;
    this.saveY = ev.touches[0].pageY - canvasPosition.y;
  }
   
  moved(ev) {
    var canvasPosition = this.canvasElement.getBoundingClientRect();
   
    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX - canvasPosition.x;
    let currentY = ev.touches[0].pageY - canvasPosition.y;
   
    ctx.lineJoin = 'round';
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 5;
   
    ctx.beginPath();
    ctx.moveTo(this.saveX, this.saveY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
   
    ctx.stroke();
   
    this.saveX = currentX;
    this.saveY = currentY;
  }
   
   
  savePad() {
    var dataUrl = this.canvasElement.toDataURL();
    this.signatureImg = dataUrl;
    let ctx = this.canvasElement.getContext('2d');
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Clears the canvas

  }

  clearPad() {
    this._CONTEXT = this.canvasElement.getContext('2d');
    this._CONTEXT.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
  }
}