Exploring the Blazor Signature Pad Component
Tags: blazor, webdev, csharp, dotnet
Published: 2022-03-22 12:56:07

---
title: Exploring the Blazor Signature Pad Component
published: true
date: 2022-03-22 10:00:17 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/exploring-the-blazor-signature-pad-component.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o43e0fgvpnvmin4652i3.png
---

The [Blazor Signature Pad](https://www.syncfusion.com/blazor-components/blazor-signature "Blazor Signature Pad Component") component is a graphical interface that 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. Also, you can use your finger, a pen, or mouse on desktop and mobile devices to draw your signature.

![Parts of the Blazor Signature Pad Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Parts-of-the-Blazor-Signature-pad.png)
<figcaption>Parts of the Blazor Signature Pad Component</figcaption>

It supports all the common web standards and functionalities that our other Essential Blazor controls do: web accessibility, right-to-left rendering, keyboard interaction, modular architecture, and responsiveness, all the while being touch-friendly and sporting a lightweight UI.

Let’s explore the Blazor Signature Pad control, its UI design, and available features with code examples.

## Use cases

The Blazor Signature Pad component is used to draw realistic and smooth signatures. The most common use case of the Signature Pad is a form within an app, online or off—anywhere you need to capture a signature.

## Key features

Key features of the Blazor Signature Pad component are as follow:

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

## Customize the stroke and background

The stroke width or thickness is calculated based on the **MinStrokeWidth** , **MaxStrokeWidth** , **Velocity,** and **drawing speed**. We can also customize the stroke color, background color, and background image using the properties available in the Blazor Signature Pad.

You can set the background image by either hosting the image in your local IIS or using an online image.

Refer to the following code example to load the Signature Pad with a background image: ** **

```html
@using Syncfusion.Blazor.Inputs
 
<div class=”control-section”>
 <div id=”signature-control”>
  <div class=’e-sign-heading’>
   <span id=”signdescription”>Sign below</span>
  </div>
  <div class=’e-sign-content’>
   <SfSignature BackgroundImage="http://localhost:6969/image/MySignature-1.png" style="width: 400px; height: 300px; background-repeat: no-repeat"></SfSignature>
  </div>
 </div>
</div>
 
<style>
  .e-sign-content,
  .e-sign-heading {
        width: 400px;
  }
 
  #signdescription {
        font-size: 14px;
        padding-bottom: 10px;
  }
</style>
```

Refer to the following image.

![Loading the Blazor Signature Pad with a Background Image](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Loading-Signature-with-a-Background-in-Blazor-Signature-Pad.png)
<figcaption>Loading the Blazor Signature Pad with a Background Image</figcaption>

To view the hosted images, we have to enable the **Directory Browsing** option in **IIS** , which will create the **web.config** file inside the hosted folder. Include the following code in the **web.config** file to resolve the [CORS issue](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing "Wikipedia page for Cross-origin resource sharing").

```html
<?xml version=”1.0” encoding=”UTF-8”?>
<configuration>
 <system.webServer>
  <directoryBrowse enabled=”true” />
  <httpProtocol>
   <customHeaders>
    <clear />
    <add name=”Access-Control-Allow-Origin” value=”*” />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>
```

## Save and load signatures

In the Signature Pad component, you can draw a signature and save it in [Base64](https://en.wikipedia.org/wiki/Base64 "Wikipedia page for Base64"), [blob](https://en.wikipedia.org/wiki/Binary_large_object "Wikipedia page for Binary large object"), and image formats using the **SaveAsync** method. This method accepts the file type and file name as parameters and can save the signature in [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics "Wikipedia page for Portable Network Graphics"), [JPEG](https://en.wikipedia.org/wiki/JPEG "Wikipedia page for JPEG"), and [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics "Wikipedia page for Scalable Vector Graphics") formats. You can also save the signature with a background color and image using the **SaveWithBackground** property.

The Blazor Signature Pad enables the users to load a pre-drawn signature as Base64 or a URL using the **LoadAsync** method. This method accepts the URL or Base 64, height, and width of the signature canvas as parameters. It also supports PNG, JPEG, and SVG image formats.

Refer to the following code example to load the pre-drawn signature in Base64 format.

```html
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
 
<div class="control-section">
 <div id="signature-control">
  <div class='e-sign-heading'>
   <span id="signdescription">Sign below</span>
   <span class="e-btn-options">
    <SfButton IsPrimary="true" class="e-sign-load" @onclick="OnLoadBase64">Reload</SfButton>
   </span>
  </div>
  <div class='e-sign-content'>
   <SfSignature @ref="signature" style="width: 400px; height: 300px;"></SfSignature>
  </div>
 </div>
</div>
@code{
 private SfSignature signature;
 private string sign;
 
 private async Task OnLoadBase64()
 {
   sign = await signature.GetSignatureAsync(); // Get signature as Base 64.
   await signature.ClearAsync();
   await signature.LoadAsync(sign, 400, 300); // Load signature as Base 64.
 }
}
<style>
 .e-sign-content,
 .e-sign-heading {
    width: 400px;
 }
 
 #signdescription {
    font-size: 14px;
    padding-bottom: 10px;
 }
 
 .e-btn-options {
    float: right;
    margin-bottom: 10px;
 }
</style>
```

Now let’s learn how to load the pre-drawn signature as a URL. This can be done by either hosting the signature in your local IIS or using an online signature image.

```html
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
 
<div class="control-section">
 <div id="signature-control">
  <div class='e-sign-heading'>
   <span>
    <SfTextBox @ref="text" Placeholder='Enter the hosted link'></SfTextBox>
   </span>
   <span class="e-btn-options">
    <SfButton IsPrimary="true" class="e-sign-load" @onclick="OnLoad">Load</SfButton>
   </span>
   <span id="signdescription">Sign below</span>
  </div>
  <div class='e-sign-content'>
   <SfSignature @ref="signature" style="width: 400px; height: 300px;"></SfSignature>
  </div>
 </div>
</div>
@code{
 private SfSignature signature;
 private string sign;
 private SfTextBox text;
 private async Task OnLoad()
 {
   await signature.LoadAsync(text.Value, 400, 400); // To load the Signature as URL.
 }
}
<style>
 .e-sign-content,
 .e-sign-heading {
    width: 400px;
 }
 
 #signdescription {
    font-size: 14px;
    padding-bottom: 10px;
 }
 
 .e-btn-options {
    float: right;
    margin: 10px 0px 10px;
 }
</style>
```

Refer to the following image.

![Loading a Signature as a URL in Blazor Signature Pad](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Loading-Signature-as-URL-in-Blazor-Signature-Pad.png)
<figcaption>Loading a Signature as a URL in Blazor Signature Pad</figcaption>

## Type text as signature

You can easily transform any text into a signature using different font families and font sizes. To do so, use the **DrawAsync** method, which accepts the signature text, font family, and font size as parameters.

Refer to the following GIF image.

![Typed Text as a Signature in Blazor Signature Pad](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Type-Text-as-a-Signature-in-Blazor-Signature-Pad.gif)
<figcaption>Typed Text as a Signature in Blazor Signature Pad</figcaption>

## Clear, undo, and redo

We can clear the pre-drawn signature using the **ClearAsync** method, which will clear the entire canvas.

Performing undo and redo actions will undo the last action performed and revert the last undo action performed, respectively, in the Signature Pad component. These can be done by using the **UndoAsync** and **RedoAsync** methods.

These actions are handled by saving a snapshot whenever a change occurs in the canvas and maintaining its index value to navigate to when performing undo and redo actions. The index value will be decreased to load the previous action and perform an undo and increased to load the next action and perform a redo.

You can enable or disable the undo and redo buttons using the **CanUndoAsync** and **CanRedoAsync** methods. Also, you can easily enable or disable the **Clear** button using the **IsEmptyAsync** method.

Refer to the following GIF image.

![Clear, Undo and Redo Options in Blazor Signature Pad](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Clear-Undo-and-Redo-Options-in-Blazor-Signature-Pad.gif)
<figcaption>Clear, Undo and Redo Options in Blazor Signature Pad</figcaption>

## Keyboard accessibility

Also, you can easily interact with the Blazor Signature Pad component using the following keyboard shortcuts:

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

## Responsiveness and touch-friendly UI

By default, the Blazor Signature Pad adapts well to all mobile devices based on the screen size. It is a touch-friendly control, so users can easily use their finger, pen, or mouse on both desktop and mobile devices to draw signatures.

## References

For more details, refer to our [Getting Started with Blazor Signature Pad Component documentation](https://blazor.syncfusion.com/documentation/signature/getting-started/ "Getting Started with Blazor Signature Component documentation") and [demos](https://blazor.syncfusion.com/demos/signature/default-functionalities?theme=bootstrap5 "Online example of default functionalities in Blazor Signature component").

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the design and features of our [Blazor Signature Pad](https://www.syncfusion.com/blazor-components/blazor-signature "Blazor Signature Pad") component. Along with what we’ve seen in this blog, the Signature Pad also supports built-in themes like Material, Bootstrap, and more.

The Signature Pad is available in our [Angular](https://www.syncfusion.com/angular-ui-components/angular-signature "Angular Signature Pad Component"), [Blazor](https://www.syncfusion.com/blazor-components/blazor-signature "Blazor Signature Pad Component"), [React](https://www.syncfusion.com/react-ui-components/react-signature "React Signature Pad Component"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-signature "Vue Signature Pad Component"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-signature "JavaScript Signature Pad Control"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/signature "ASP.NET Core Signature Pad Control") and [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/signature "ASP.NET MVC Signature Pad Control")) platforms. Try them out and enjoy hassle-free signing!

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [5 Simple Steps to Create a Blazor Component](https://www.syncfusion.com/blogs/post/5-simple-steps-to-create-a-blazor-component.aspx "5 Simple Steps to Create a Blazor Component blog")
- [Easily Deploy a Blazor WebAssembly App to Cloudflare](https://www.syncfusion.com/blogs/post/easily-deploy-a-blazor-webassembly-app-to-cloudflare.aspx "Easily Deploy a Blazor WebAssembly App to Cloudflare blog")
- [Pros and Cons of Using JavaScript Interop in Blazor](https://www.syncfusion.com/blogs/post/pros-and-cons-of-using-javascript-interop-in-blazor.aspx "Pros and Cons of Using JavaScript Interop in Blazor blog")
- [Easily Use a JavaScript Control in a Blazor Server App](https://www.syncfusion.com/blogs/post/easily-use-a-javascript-control-in-a-blazor-server-app.aspx "Easily Use a JavaScript Control in a Blazor Server App blog")