Signature Customization

11 Apr 20171 minute to read

Stroke color

Signature widget allows you to set the stroke color for the signature stroke using the stroke-color property. When we set our required color, then the signature’s stroke color will be changed.

The following example is used to render the Signature control with stroke color.

In the View page, define the following code.

  • CSHTML
    • <ej-signature id="mysign" height="400px" stroke-color="red" />

    The following screenshot illustrates the Signature with custom defined stroke color.

    Stroke Width

    Signature widget allows you to set the stroke width for the control using the stroke-width= property. When we set our required width, then the signature’s stroke width will be changed.

    The following code example is used to render the Signature control with stroke width value.

    In the View page, define the following code.

  • CSHTML
    • <ej-signature id="mysign" height="400px" stroke-width="5" />

    The following screenshot illustrates the Signature with custom defined stroke maximum value.

    Background color

    Signature widget allows you to set the background Color for the control using the background-color property. When we set our required background, then the signature’s background color will be changed automatically.

    The following code example is used to render the Signature control with background color.

    In the View page, define the following code.

  • RAZOR
    • <ej-signature id="mysign" height="400px" background-color="grey" />

    The following screenshot illustrates the Signature with custom defined background image

    Background Image

    Signature widget allows you to set the background image for the control using the background-image property. When we set our required background image, then the signature’s canvas will be changed with the given image.

    The following code example is used to render the Signature control with customized background image.

    In the View page, define the following code.

  • RAZOR
    • <ej-signature id="mysign" height="400px" background-image="../images/water.png"/>

    The following screenshot illustrates the Signature with custom defined background image.