Signature Customization

6 Nov 20173 minutes to read

Background color

Signature widget allows you to set the background Color for the control using the backgroundColor 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

Add the following script to render signature with customized background color.

JS

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module SignatureComponent {
    $(function () {
        var basicSignature = new ej.Signature($("#signature"), {
                 backgroundColor:"#808080"
                  });
        });
  }

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

Background Image

Signature widget allows you to set the background image for the control using the backgroundImage 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.

Add the following script to render signature with customized value.

JS

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module SignatureComponent {
    $(function () {
        var basicSignature = new ej.Signature($("#signature"), {
                backgroundImage: "image.jpg"
                 });
        });
}

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

Stroke color

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

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

Add the following script to render signature with customized stroke color.

JS

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />
module SignatureComponent {
    $(function () {
        var basicSignature = new ej.Signature($("#signature"), { 
                strokeColor: "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 strokeWidth 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 maximum stroke value.

Add the following script to render signature with customized stroke width.

JS

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module SignatureComponent {
    $(function () {
        var basicSignature = new ej.Signature($("#signature"), {
                 strokeWidth: 4
            });
        });
   }

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