NgxSignaturePad

Angular 9 library for drawing smooth signatures, based on signature_pad.

$3

Install package

npm i @o.krucheniuk/ngx-signature-pad -D

#### Import NgxSignaturePadModule into app.module.ts

import {NgxSignaturePadModule} from '@o.krucheniuk/ngx-signature-pad';
imports: [
SharedModule,
BrowserModule,
NgxSignaturePadModule
],

#### Use component:

#### Add into app.component.html :



#### Add into app.component.ts:

@ViewChild('testPad', {static: true}) signaturePadElement: NgxSignaturePadComponent;

config: SignaturePadOptions = {
minWidth: 1,
maxWidth: 10,
penColor: 'blue'
};

$3

https://stackblitz.com/edit/ngx-signature-pad

#### API
API is accessable via this.signaturePadElement
#### Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
toDataURL(); // save image as PNG
toDataURL("image/jpeg"); // save image as JPEG
toDataURL("image/svg+xml"); // save image as SVG

// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups
toData();

// Draws signature image from an array of point groups
fromData(data);

// Clears the canvas
clear();

// Returns true if canvas is empty, otherwise returns false
isEmpty();

// Unbinds all event handlers
off();

// Rebinds all event handlers
on();

// Force re-render of the signature canvas. Method also clears canvas
forceUpdate();
Config options
dotSize : (float or function) Radius of a single dot.

minWidth: (float) Minimum width of a line. Defaults to 0.5.

maxWidth: (float) Maximum width of a line. Defaults to 2.5.

throttle: (integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.

minDistance: (integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.

backgroundColor: (string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.

penColor: (string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".

velocityFilterWeight: (float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.

$3

Canvas used for drawing is responsive. To limit it size add static dimensions for parent element of ngx-signature-pad