I have tried to use paperjs and angular-signature library but all to no avail, it seems I couldn't found my way around it.
But I later found another better solution. I thought posting the answer under the right question keywords will be helpful since most existing questions are not helpful enough for angular e-signature solution.
I later found a solution using fabricjs library and I'd like to post the answer below. If its helpful kindlyleaveyour comment and vote. Thanks
To use this code ensured you have install fabricjs
Note: By the time I wrote this code I'm using angular v11
Good luck
import { Component, OnInit} from '@angular/core';
import {fabric} from 'fabric';
@Component({
selector: 'app-signature',
templateUrl: './signature.component.html',
styleUrls: ['./signature.component.scss'],
})
export class SignatureComponent implements OnInit {
constructor() { }
canvas: any ;
clearCanvas(){
this.canvas.clear();
console.log(this.canvas.clear());
}
image: string = "";
saveCanvas(){
// save the image in the image variable as base64 png image string
this.image = this.canvas.toDataURL('png');
// console.log(this.image);
}
ngOnInit() {
this.canvas = new fabric.Canvas('canvas',
{
isDrawingMode: true
});
// color of the canvas
this.canvas.freeDrawingBrush.color = '#000';
//size or thickness of the line
this.canvas.freeDrawingBrush.width = 5;
}
}.wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #edeaea;
}
.signature-canvas {
width: 100%;
height: 60%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.header {
width: 70%;
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid #fefefe;
}
.canvas-wrapper {
// width: 100%;
border-top: 2px solid var(--app-base-color);
border-bottom: 2px solid var(--app-base-color);
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.button-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px;
padding-right: 50px;
}
}<div class="wrapper">
<div class="signature-canvas">
<div class="header">
<h1>Write your Signature Below</h1>
</div>
<div class="canvas-wrapper">
<canvas id="canvas" #canvas width="600px" height="250px"></canvas>
</div>
<div class="button-wrapper">
<button (click)="clearCanvas()">Clear</button>
<button (click) ="saveCanvas()">Save</app-button>
</div>
<!-- //preview -->
<!-- <img [src]="image" alt="" style="border: 2px solid red"> -->
</div>
</div>Blockquote