Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (30)Angular  (64)ASP.NET  (48)ASP.NET Core  (72)ASP.NET MVC  (88)Azure  (31)Blazor  (130)DocIO  (22)Essential JS 2  (76)Essential Studio  (168)File Formats  (25)Flutter  (121)JavaScript  (165)Microsoft  (107)PDF  (64)React  (45)Succinctly series  (126)Syncfusion  (534)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (29)Windows Forms  (57)WinUI  (38)WPF  (131)Xamarin  (142)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (55)Cloud  (11)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (53)Development  (323)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (9)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (269)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (33)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (20)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (88)UI  (183)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (292)What's new  (177)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing JavaScript Signature Pad in Essential JS2

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
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
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
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
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.

PlatformLive demoDocumentation
AngularAngular Signature Pad demosGetting started with Angular Signature Pad 
ReactReact Signature Pad demosGetting started with React Signature Pad 
VueVue Signature Pad demosGetting started with Vue Signature Pad 
JavaScriptJavaScript Signature Pad demosGetting started with JavaScript Signature Pad 
ASP.NET MVCASP.NET MVC Signature Pad demosGetting started with ASP.NET MVC Signature Pad
ASP.NET Core ASP.NET Core Signature Pad demosGetting 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

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top