Issues using Canvas in Ionic Angular app

Ionic Framework
1

The issue I’m experiencing is present with multiple 3rd party components that use the Canvas element. I’m trying to capture a signature using Kendo UI signature component and @almothafar/angular-signature-pad - npm

Touch is not being registered in the place it actually occurs as you can see below

signatureissue

With @almothafar/angular-signature-pad - npm I’ve created a brand new Ionic Angular app and added the component to the home page

ionic start
npm install @almothafar/angular-signature-pad --save

Modify the home page as follows;

import { NgSignaturePadOptions } from '@almothafar/angular-signature-pad';
import { Component, ViewChild } from '@angular/core';
import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: false,
})
export class HomePage {

  @ViewChild('signature')
  public signaturePad!: SignaturePadComponent;

  public signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor
    minWidth: 5,
    canvasWidth: 300,
    canvasHeight: 300,
    backgroundColor : "white"
  };

  constructor() {
    // no-op
  }

  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(event: MouseEvent | Touch | Event) {
    // will be notified of szimek/signature_pad's onEnd event
    console.log('Completed drawing', event);
    console.log(this.signaturePad.toDataURL());
  }

  drawStart(event: MouseEvent | Touch | Event) {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('Start drawing', event);
  }

}

The template

<signature-pad #signature [options]="signaturePadOptions" (drawStart)="drawStart($event)" (drawEnd)="drawComplete($event)"></signature-pad>

The end result is the drawing on the canvas does not register the touch in the correct place but is misaligned. I have the same experience with the Knedo UI component, which I raised with that team and they believe it’s an issue with the Ionic framework.

2

So the issue appears to be related to the Ionic framework making some CSS/layout changes after the signature is rendered which then throws out the capture of the signature.

The resolution is to not show the signature component until Ionic has completed it’s changes (the lifecycle events below are tied to the ionic router outlet).

App component

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

Signature component

export class SignaturePage  implements OnInit, AfterViewInit, ViewDidEnter  {
  isLoaded = false;

  ngOnInit() {
  }

  ngAfterViewInit(): void {
  }

  ionViewDidEnter(): void {
      this.isLoaded = true;
  }

}


<div *ngIf="isLoaded" class="signature-wrapper">
  <kendo-signature
  #signature
  color="red"
  backgroundColor="white"
  [strokeWidth]=1
  [smooth]="true"
  [maximizable]="false"
  [hideLine]="true"
  ></kendo-signature>
</div>
1 Like
3

Interesting… Thank you for sharing