BoldSign

Introducing the JavaScript Signature Pad Control in Essential JS 2

We are happy to introduce the new JavaScript Signature Pad control in the Essential JS 2 suite with the 2021 Volume 4 release.

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

In this blog, we are going to explore the features of the new Signature Pad control and its supported platforms.

Signature Pad: overview

The Signature Pad control is a smooth, realistic, responsive, and completely customizable control. It supports web standard functionalities like accessibility, keyboard interactions, events, and an optimized UI for touch interactions.

Refer to the following image.

JavaScript Signature Pad Control

Use cases

The JavaScript Signature Pad control is used to draw a realistic and smooth signature. The following are some use case scenarios the Signature Pad control will best fit:

  • Online form: Insert the Signature Pad control in web apps that need applicants’ handwritten signatures.
  • Offline form: Insert the Signature Pad control in mobile apps that need customers’ signatures (example: couriers and offline stores).

Key features

The key features of the JavaScript Signature Pad control are as follows:

  • Customizing the stroke and background.
  • Save and load signatures.
  • Draw signatures.
  • Clear, undo and redo signatures.
  • Utilize keyboard accessibility and responsiveness.

Customizing stroke and background

We can customize the stroke width, velocity, and speed of the drawing strokes. Also, we can customize the stroke color, background color, and background image.

Save and load signatures

In the Signature Pad control, you can draw your signature and save it in Base64, blob, and image formats. The control supports PNG, JPEG, and SVG image types. You can also save the signature with a background color and image.

A pre-drawn signature can be loaded in the Signature Pad as Base64 and URL.

Refer to the following GIF image.

Loading Signature in JavaScript Signature Pad

Type text as a signature

Transform any text into a signature using different font families and font sizes. Refer to the following GIF image.

Type Text as a Signature in JavaScript Signature Pad

Clear, undo and redo

The clear option is used to clear a drawn signature. The undo option erases the last action and the redo option restores the most recently undone operation performed in the Signature Pad control.

Refer to the following GIF image.

Clear, Undo and Redo Options in JavaScript Signature Pad

Keyboard accessibility

You can easily interact with the JavaScript Signature Pad control using the keyboard shortcuts:

  • Ctrl + S: Save the signature in the default (PNG) format.
  • Ctrl + Z: Undo the previous action.
  • Ctrl + Y: Redo the most recent undo action.

Responsiveness and touch-friendly UI

The Signature Pad adapts to all mobile devices based on the screen size by default. It is a touch-friendly control, so users can use a finger, pen, or mouse on the desktop and mobile devices to draw the signature.

How to use it

The JavaScript Signature Pad control was implemented with consideration for all the applicable cases and major platforms. It has a huge set of resources for developers, including source code on GitHub, live demos, and custom features in the documentation.

Supported platforms

The following platforms support Signature Pad control.

Platform Live demo Documentation
Angular Angular Signature Pad demos Getting started with Angular Signature Pad
React React Signature Pad demos Getting started with React Signature Pad
Vue Vue Signature Pad demos Getting started with Vue Signature Pad
JavaScript JavaScript Signature Pad demos Getting started with JavaScript Signature Pad
ASP.NET MVC ASP.NET MVC Signature Pad demos Getting started with ASP.NET MVC Signature Pad
ASP.NET Core ASP.NET Core Signature Pad demos Getting started with ASP.NET Core Signature Pad

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to Essential JS 2’s new Signature Pad control, rolled out in the 2021 Volume 4 release. Try out this marvelous control and provide your valuable feedback. Also, check out our Release Notes and What’s New pages to see all the new updates in this release.

You can contact us through our support forums, support portal, or  feedback portal. We are always happy to assist you!

Related blogs

Satheeskumar S

Satheeskumar works as a product manager at Syncfusion, where he specializes in the development of web components with cutting-edge technologies. He is interested in the latest web technologies and provides solutions for great products.