Learn how to integrate the Angular Signature Pad with the Toolbar component. You’ll also see how to use many of its customization options.

The Angular Signature Pad is a graphical interface that allows users to draw smooth signatures as vector outline strokes using variable-width Bezier curve interpolation. It allows you to save signatures as images and vice versa. You can use your finger, pen, or mouse on desktop and mobile devices to draw your own signature.

The Signature Pad control supports various customization options: background color, background image, stroke color, stroke width, save with background, undo, redo, clear, read-only, and disable. In this video, each toolbar item illustrates the Signature Pad component functionalities.

Use the Undo button or Ctrl + Z key combo to revert your signature, the Redo button or Ctrl + Y key combo to remake your reverted signature, and the Save button or Ctrl + S key combo to store your signature as an image file. Use a stroke color picker and background color picker in the Signature component to apply those aspects. Users can utilize the stroke width drop-split button values to change the signature stroke width.

The variable stroke width is based on the values of the maximum stroke width, minimum stroke width, and velocity for smoother and realistic signatures. The default value of the minimum stroke width is 0.5, the maximum stroke width is 2.5 and the velocity is 0.7. Use the Clear button to clear the signature. You can also check the Disabled checkbox to disable the Signature component. You can save the signature as an image to formats like PNG, JPEG, and SVG.

Download an example from GitHub: https://github.com/SyncfusionExamples/how-to-integrate-the-angular-signature-pad-with-the-toolbar

Documentation on the Syncfusion Angular Signature Pad component:
https://ej2.syncfusion.com/angular/documentation/signature/user-interaction