Angular 9 library for drawing smooth signatures, based on [signature_pad](https://www.npmjs.com/package/signature_pad).

Downloads in past


0.0.74 years ago4 years agoMinified + gzip package size for @o.krucheniuk/ngx-signature-pad in KB


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


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:

Use component:

Add into app.component.html :

<ngx-signature-pad [config]="config" #testPad></ngx-signature-pad>

Add into app.component.ts:

@ViewChild('testPad', {static: true}) signaturePadElement: NgxSignaturePadComponent; `config: SignaturePadOptions = { minWidth: 1, maxWidth: 10, penColor: 'blue' };`

Stackblitz example



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.


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