New to Kendo UI for jQuery? Start a free 30-day trial

Signature Appearance

Updated over 6 months ago

The Kendo UI for jQuery Signature enables you to change various appearance aspects about the widget.

The following example demonstrates a Signature widget with custom appearance settings.

    <div id="signature"></div>
    <script>
      $(document).ready(function () {
        $("#signature").kendoSignature({
          backgroundColor: "#fad980",
          color: "#212121",
          width: 500,
          height: 200,
          strokeWidth: 4
        });
      });
    </script>

Background Color

To modify the background color of the Signature container, use its backgroundColor property.

html

$("#signature").kendoSignature({
    backgroundColor: "#fad980"
});

Stroke Color

You can also change the stroke color of the Signature by using its color property.

html

$("#signature").kendoSignature({
    color: "#212121"
});

Stroke Width

To update the stroke width of the Signature, utilize its strokeWidth property.

html

$("#signature").kendoSignature({
    strokeWidth: 4
});

Options

The Kendo UI Signature supports the following styling options:

size—configures the overall size of the component.
rounded—configures the border radius of the component.
fillMode—configures how the color is applied to the component.

Size

The size option controls how big or small the rendered Signature looks.

The following values are available for the size option:

sm—small size
md—medium size
lg—large size
none—unset

The following example demonstrates how to configure the size of the component through the widget configuration:

<div id="signature"></div>
<script>
$("#signature").kendoSignature({
    size: "medium"
});
</script>

Rounded

The rounded option controls how much border radius is applied to the rendered Signature.

The following values are available for the rounded option:

sm—small border radius
md—medium border radius
lg—large border radius
full—largest border radius
none—unset

The following example demonstrates how to configure the rounded of the component through the widget configuration:

<div id="signature"></div>
<script>
$("#signature").kendoSignature({
    rounded: "medium"
});
</script>

FillMode

The fillMode option controls the way the color is applied to the rendered Signature.

The following values are available for the fillMode option:

solid
flat
outline
none

The following example demonstrates how to configure the fillMode of the component through the widget configuration:

<div id="signature"></div>
<script>
$("#signature").kendoSignature({
    fillMode: "solid"
});
</script>