Getting Started

15 Dec 20173 minutes to read

The Essential JavaScript Signature simplifies creation of a signature capture in a browser, allowing a user to draw a signature using mouse or touch.

This section explains briefly about how to create a Signature control in your application with JavaScript by the following step-by-step instructions. The following screenshot demonstrates the functionality of Signature widget.

Create Signature Control

Create an HTML file and add the following template in the HTML file.

  • HTML
    • <!doctype html>

<html>
<head>
    <title>Essential Studio for JavaScript : Signature Default Functionalities</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
    <link href="http://cdn.syncfusion.com/**28.1.33**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"></script>
    <script src="http://cdn.syncfusion.com/**28.1.33**/js/web/ej.web.all.min.js"></script>
    <!--Add custom scripts here -->
</head>
<body>

</body>
</html>

    Add div element to create Signature.

  • HTML
    • <div class="content-container-fluid">
    <div class="row">
        <div class="cols-sample-area">
            <! ----------------signature Control---------------->
            <div id="signature">
            </div>
        </div>
    </div>
</div>

    Add the following script to create the signature.

  • JS
    • <script type="text/javascript">
        $(function () {
            $("signature").ejSignature({});
        });

    </script>

    The following screenshot is the output for the above code.

    Adjusting Signature Size

    You can customize the width and height of the Signature by width and height properties. These properties completely depend on signature canvas. The width and height are adjusted within the signature canvas.

    The following code example is used to render the Signature control with customized width and height.

    Add the following HTML to render signature with customized width and height.

  • HTML
    • <div>
    <div id="signature" class="signature" />
</div>

    Add the following script to render signature with customized width and height.

  • JS
    • <script type="text/javascript">
        $(function () {
            $("signature").ejSignature({ width: "200px", height: "300px" });
        });
    </script>

    The following screenshot illustrates signature with customized width and height.