Cannot read property 'toDataURL' of undefined SignaturePad

I don’t know what I am doing wrong but I can’t figure out what’s wrong.

I am trying to get a basic64 img but the signaturepad is undefined lol. Why? I think I am doing everything right. I get the error

Cannot read property 'toDataURL' of undefined

The signature pad appears but when I try to get the image it’s undefined…

Here’s my code:


import { Component, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';

  selector: 'app-signature-pad',
  templateUrl: './',
  styleUrls: ['./'],
export class SignaturePadPage {

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  signature: string = '';
  isDrawing = false;
  width: any;
  height: any;

  private signaturePadOptions: object = {
    minWidth: 2,
    canvasHeight: window.innerHeight / 3,
    canvasWidth: window.innerWidth / 1.2,
    backgroundColor: '#ffffff',
    penColor: '#000000',

  constructor(platform: Platform, private router: Router) {
    platform.ready().then((readySource) => {
      this.width = platform.width();
      this.height = platform.height();

  canvasResize() {
    const canvas = document.querySelector('canvas');
    this.signaturePad.set('minWidth', 1);
    this.signaturePad.set('canvasWidth', canvas.offsetWidth);
    this.signaturePad.set('canvasHeigth', canvas.offsetHeight);

  drawComplete() {
    this.isDrawing = false;

  drawStart() {
    this.isDrawing = true;

  goToPage() {
    var sig_object: any = {'desc':,
                            'signaturepad': this.signature};
    this.router.navigate(['/pg'], { state: { data: { sigpad: sig_object}}});


  savePad() {

    this.signature = this.signaturePad.toDataURL();


  clearPad() {


  <ion-toolbar color="primary">
    <ion-buttons slot="start" defaultHref="/pg">
    <ion-title style="text-align: center">Signature</ion-title>

  <div style="margin-top: 20%; padding: 0">
    <ion-grid lines="none" style="margin-top: 50px">
      <ion-row [ngClass]="{'drawing-active': isDrawing}">
        <ion-col style="border: 1px solid #000000; padding: 5px">
          <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
          <ion-button size="large" color="danger" expand="full" (click)="clearPad()">Clear</ion-button>
          <ion-button size="large" style="color: secondary" expand="full" (click)="savePad()">Save</ion-button>

I would be very very thankful. Please help me.

Thank you

I had the same problem

change the following in the HTML file
<signature-pad [options] = "signaturePadOptions" (onBeginEvent) = "drawStart ()" (onEndEvent) = "drawComplete ()"> </signature-pad>
<signature-pad #signatureCanvas [options] = "signaturePadOptions" id = "signatureCanvas" (onBeginEvent) = "drawStart ()" (onEndEvent) = "drawComplete ()"> </signature-pad>

and replace the following in the TS file
@ViewChild (SignaturePad) signaturePad: SignaturePad;
@ViewChild ('signatureCanvas', {static: true}) signaturePad: SignaturePad;

in the canvasResize () function I set the height and width directly above the object from
this.signaturePad.set ('canvasWidth', canvas.offsetWidth);
this.signaturePad.set ('canvasWidth', this.signaturePadOptions.canvasWidth);
since he hadn’t adopted the styles.


Thank you much. You have helped me! :star_struck: