Class SfSignature

The SfSignature component allows users to draw smooth signatures as vector outline of strokes using variable width Bézier curve interpolation. It provides the ability to save signatures as images and supports drawing using finger, pen, or mouse on tablets, touchscreens, and other devices.

Inheritance
System.Object
SfBaseComponent
SfSignature
Inherited Members
Namespace: Syncfusion.Blazor.Inputs
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSignature : SfBaseComponent
Remarks

The SfSignature component is a user interface element for creating digital signatures or drawing text. It supports customizable stroke color, background color, and background image settings. The component provides features like undo/redo operations, signature clearing, and multiple export formats including PNG, JPEG, and SVG.

Examples

In the below code example, a basic SfSignature component is initialized.

 
<SfSignature style="height: 100%; width: 100%;"></SfSignature>

Constructors

SfSignature()

Declaration
public SfSignature()

Properties

BackgroundColor

Gets or sets the background color of the SfSignature component.

Declaration
public string BackgroundColor { get; set; }
Property Value
Type Description
System.String

A string representing the background color of the component that accepts hex value, RGB, and text values (like red). The default value is null.
Remarks

This property allows you to customize the background color of the signature canvas. The color can be specified in various formats including hex (#FF0000), RGB (rgb(255,0,0)), or named colors (red).

BackgroundImage

Gets or sets the background image for the SfSignature component.

Declaration
public string BackgroundImage { get; set; }
Property Value
Type Description
System.String

A string representing the URL or path of the image used to fill the background of the component. The default value is null.
Remarks

This property allows you to set a background image for the signature canvas. The image can be specified as a URL, base64 string, or relative path.

Changed

Gets or sets an event callback that is raised for actions like undo, redo, clear, and when the user completes signing on the SfSignature component.

Declaration
public EventCallback<SignatureChangeEventArgs> Changed { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SignatureChangeEventArgs>

An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when signature actions occur. The callback receives a SignatureChangeEventArgs containing action details.
Remarks

This event is triggered for various signature operations including stroke updates, undo/redo operations, and clearing the signature. You can use this event to respond to user interactions and implement custom logic based on the specific action performed.

Examples
<SfSignature Changed="@changefunc"></SfSignature>
@code 
{
    private void changefunc(SignatureChangeEventArgs args) 
    {
        if (args.ActionName == "Clear")
        {
            // validation code goes here
        }
    }
}

Created

Gets or sets an event callback that is raised when component rendering is completed.

Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component has finished rendering.
Remarks

This event is triggered after the component has been fully rendered and is ready for interaction. You can use this event to load pre-drawn signatures or perform initialization tasks that require the component to be fully rendered.

Examples

In the below code example, a pre-drawn signature is loaded using the Created event.

<SfSignature @ref="signature" Created="@Created">
</SfSignature>
@code {
    private SfSignature signature;

    private void Created() {
        var sign = ""; // Base 64 or URL of the pre-drawn signature
        signature.LoadAsync(sign);
    }
}

Disabled

Gets or sets whether to disable the SfSignature component where the opacity is set to show disabled state.

Declaration
public bool Disabled { get; set; }
Property Value
Type Description
System.Boolean

true if the signature component is disabled for user interaction; otherwise, false. The default value is false.
Remarks

When this property is set to true, the signature component becomes non-interactive and displays with reduced opacity to indicate the disabled state. Users will not be able to draw signatures or interact with the component when it is disabled.

EnablePersistence

Gets or sets whether to persist the component's state between page reloads.

Declaration
public bool EnablePersistence { get; set; }
Property Value
Type Description
System.Boolean

true if the component's state persistence is enabled; otherwise, false. The default value is false.
Remarks

When enabled, the component's properties and signature data will be stored in the browser's local storage to persist the component's state across page reloads. This ensures that drawn signatures are not lost when the user navigates away from or refreshes the page.

HtmlAttributes

Gets or sets a collection of additional attributes that will applied to the SfSignature component.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Remarks

Additional attributes can be added as inline attributes or by specifying @attributes directive.

Examples

In the below code example, signature height and width has been specified as style attribute in SfSignature.

<SfSignature style="height: 100%; width: 100%;"></SfSignature>

IsReadOnly

Gets or sets whether to prevent interaction in the SfSignature component.

Declaration
public bool IsReadOnly { get; set; }
Property Value
Type Description
System.Boolean

true if the signature component is in read-only state where user interaction is prevented; otherwise, false. The default value is false.
Remarks

When this property is set to true, the signature component enters read-only mode, preventing users from drawing, editing, or modifying signatures. This is useful for displaying signatures that should not be altered while still allowing other operations like viewing or saving.

MaxStrokeWidth

Gets or sets the maximum stroke width for signature. The SfSignature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.

Declaration
public double MaxStrokeWidth { get; set; }
Property Value
Type Description
System.Double

A double representing the maximum width of stroke. The default value is 2.0.
Remarks

This property sets the maximum thickness for signature strokes. The component uses this value along with MinStrokeWidth and Velocity to dynamically calculate stroke thickness based on drawing speed and pressure.

MinStrokeWidth

Gets or sets the minimum stroke width for signature. The SfSignature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.

Declaration
public double MinStrokeWidth { get; set; }
Property Value
Type Description
System.Double

A double representing the minimum width of stroke. The default value is 0.5.
Remarks

This property sets the minimum thickness for signature strokes. The component uses this value along with MaxStrokeWidth and Velocity to dynamically calculate stroke thickness based on drawing speed and pressure.

OnSave

Gets or sets an event callback that is raised while saving the signature.

Declaration
public EventCallback<SignatureSaveEventArgs> OnSave { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<SignatureSaveEventArgs>

An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the signature is being saved. The callback receives a SignatureSaveEventArgs containing save options.
Remarks

This event allows you to modify the file name and file type (PNG, JPEG, SVG) using SignatureSaveEventArgs and SignatureFileType. The event callback is triggered only for keyboard actions (Ctrl + S) and provides an opportunity to customize save parameters or cancel the save operation.

Examples
<SfSignature OnSave="@beforesavefunc"></SfSignature>
@code 
{
    private void beforesavefunc(SignatureSaveEventArgs args) 
    {        
        args.FileType = SignatureFileType.Jpeg;
    }
}

SaveWithBackground

Gets or sets whether to save the signature along with BackgroundColor and BackgroundImage while saving.

Declaration
public bool SaveWithBackground { get; set; }
Property Value
Type Description
System.Boolean

true if the signature component saves with background elements; otherwise, false. The default value is true.
Remarks

This property determines whether the background color and background image are included when saving the signature. When set to true, the saved signature will include any background styling applied to the component. When set to false, only the signature strokes will be saved without background elements.

StrokeColor

Gets or sets the stroke color of the signature.

Declaration
public string StrokeColor { get; set; }
Property Value
Type Description
System.String

A string representing the color of the signature stroke that accepts hex value, RGB, and text values (like red). The default value is "#000000".
Remarks

This property defines the color used for drawing signature strokes. The color can be specified in various formats including hex (#000000), RGB (rgb(0,0,0)), or named colors (black).

Velocity

Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface. The SfSignature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth.

Declaration
public double Velocity { get; set; }
Property Value
Type Description
System.Double

A double representing the velocity used to calculate stroke thickness based on contact pressure on the digitizer surface. The default value is 0.7.
Remarks

This property affects how the stroke thickness varies based on drawing speed and pressure. Higher values result in more variation in stroke thickness, while lower values produce more uniform strokes.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

CanRedoAsync()

Returns whether the redo collection contains actions that can be redone.

Declaration
public Task<bool> CanRedoAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A System.Threading.Tasks.Task<> that returns true if there are actions available to redo; otherwise, false.
Remarks

This method checks if there are any previously undone actions stored in the redo collection that can be reapplied. It is useful for enabling or disabling redo functionality in the user interface.

CanUndoAsync()

Returns whether the undo collection contains actions that can be undone.

Declaration
public Task<bool> CanUndoAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A System.Threading.Tasks.Task<> that returns true if there are actions available to undo; otherwise, false.
Remarks

This method checks if there are any previous actions stored in the undo collection that can be reversed. It is useful for enabling or disabling undo functionality in the user interface.

ClearAsync()

Erases all the signature strokes signed by the user.

Declaration
public Task ClearAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished erasing all signature strokes.
Remarks

This method removes all drawn signature content from the canvas, effectively clearing the signature component. The Changed event will be triggered with the action name "Clear" when this operation completes.

DrawAsync(String, String, Int32, Nullable<Double>, Nullable<Double>)

Draws the specified text as signature on the SfSignature component.

Declaration
public Task DrawAsync(string text, string fontFamily = "Arial", int fontSize = 30, Nullable<double> x = null, Nullable<double> y = null)
Parameters
Type Name Description
System.String text

The text content to render as signature.
System.String fontFamily

The font family to use for the text. Default value is "Arial".
System.Int32 fontSize

The font size in pixels for the text. Default value is 30.
System.Nullable<System.Double> x

Optional. The X-coordinate position to draw the signature. If not specified, defaults to the center point of the canvas.
System.Nullable<System.Double> y

Optional. The Y-coordinate position to draw the signature. If not specified, defaults to the center point of the canvas.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished drawing the text signature.
Remarks

This method allows you to create text-based signatures programmatically rather than requiring hand-drawn input. The text will be rendered using the specified font properties and positioned according to the provided coordinates.

GetSignatureAsync(SignatureFileType)

Returns the signature as a base 64 encoded string.

Declaration
public Task<string> GetSignatureAsync(SignatureFileType type)
Parameters
Type Name Description
SignatureFileType type

The file format for the signature. Default value is Png.
Returns
Type Description
System.Threading.Tasks.Task<System.String>

A System.Threading.Tasks.Task<> that returns the signature as a base 64 encoded string.
Remarks

The SaveWithBackground property determines whether to include background elements in the signature. The SignatureFileType parameter determines the format of the returned base 64 string (PNG, JPEG, or SVG).

IsEmptyAsync()

Returns whether the signature canvas is empty or contains signature strokes.

Declaration
public Task<bool> IsEmptyAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A System.Threading.Tasks.Task<> that returns true if the signature canvas is empty; otherwise, false.
Remarks

This method checks if any signature content has been drawn on the canvas. It is useful for validation purposes to determine if a user has provided a signature before processing.

LoadAsync(String, Nullable<Int32>, Nullable<Int32>)

Renders the base 64 string or image URL as signature on the SfSignature component.

Declaration
public Task LoadAsync(string signature, Nullable<int> width = null, Nullable<int> height = null)
Parameters
Type Name Description
System.String signature

The base 64 string or image URL to render as signature.
System.Nullable<System.Int32> width

Optional. The width to render the loaded signature. If not specified, uses the original image width.
System.Nullable<System.Int32> height

Optional. The height to render the loaded signature. If not specified, uses the original image height.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished loading and rendering the signature.
Remarks

This method allows you to load pre-existing signatures from base 64 encoded strings or image URLs. It is commonly used to restore previously saved signatures or load signature templates.

OnAfterRenderAsync(Boolean)

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender
Returns
Type
System.Threading.Tasks.Task
Overrides

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task

RedoAsync()

Redoes the last undone user action performed on the signature.

Declaration
public Task RedoAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished the redo operation.
Remarks

This method reapplies the most recently undone drawing action, allowing users to restore previously undone changes. The Changed event will be triggered with the action name "Redo" when this operation completes.

RefreshAsync()

Refreshes the signature canvas to reflect external changes, ensuring the updated height and width.

Declaration
public Task RefreshAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished re-rendering with the new canvas dimensions.
Remarks

This method is useful when the signature component's container size has changed dynamically and you need to update the canvas dimensions accordingly. It ensures that the signature canvas properly reflects any external layout changes.

SaveAsBlobAsync()

Returns the signature as a Blob object.

Declaration
public Task<object> SaveAsBlobAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Object>

A System.Threading.Tasks.Task<> that returns a tuple containing the blob data and MIME type ("image/png").
Remarks

The SaveWithBackground property determines whether to include background elements in the signature blob. This method is useful for scenarios where you need to handle the signature data as a binary blob rather than a base 64 string.

SaveAsync(SignatureFileType, String)

Saves the signature as an image with the specified file type and name.

Declaration
public Task SaveAsync(SignatureFileType fileType, string fileName = "Signature")
Parameters
Type Name Description
SignatureFileType fileType

The file format for saving the signature. Default value is Png.
System.String fileName

The name of the file to be saved. Default value is "Signature".
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished the saving operation.
Remarks

The SaveWithBackground property determines whether to save the signature with background elements or not. This method triggers a download of the signature image in the browser.

UndoAsync()

Undoes the last user action performed on the signature.

Declaration
public Task UndoAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that completes when the component has finished the undo operation.
Remarks

This method reverses the most recent drawing action, allowing users to correct mistakes. The Changed event will be triggered with the action name "Undo" when this operation completes.