How to implement angular signature with fabricjs in angular 11?

Question

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

Answer 1

To use this code ensured you have install fabricjs

1. Install Fabric: npm i fabric
2. Install types: npm i @types/fabric

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

Answer 2

material-ui has pickers: @material-ui/pickers

You can use it with format option:

import React, { useState } from 'react';
import { DateTimePicker } from '@material-ui/pickers';

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
      <DateTimePicker format="dd-MM-yyyy HH:mm:ss" value={selectedDate} onChange={handleDateChange} />
  );
}

export default App;