Draw in EJ2 JavaScript Signature control

15 May 202310 minutes to read

Draw

The draw method is used to drawn a text as signature with different font families like Arial, Serif, with different font sizes. It accepts text, font family, font size as its parameters. The default font family is “Arial”, and the default font size is “30”.

ej.base.enableRipple = true;

var signature = new ej.inputs.Signature({}, '#signature');

var ddlObj = new ej.dropdowns. DropDownList(
    {
        value: 'Arial',
        popupHeight: '200px',
    });
ddlObj.appendTo('#ddl');

var ddlObj1 = new ej.dropdowns. DropDownList(
    {
        value: '20',
        popupHeight: '200px',
    });
ddlObj1.appendTo('#ddl1');

var button = new ej.buttons.Button({cssClass: 'e-primary'}, '#draw');

button.element.onclick = function (e) {
    var text = document.getElementById('text').value;
    var font = ddlObj.value;
    var size = ddlObj1.value;
    signature.draw(text, font, size);
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Signature</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript Signature Component">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="signature-control">
            <canvas id="signature" style="height: 100%; width: 100%;"></canvas>
        </div>
        <div id="input">
            <table>
                <tbody>
                    <tr>
                        <td><div>Enter the Text:</div></td>
                        <td><input type="text" id="text" placeholder="Enter the Text"></td>
                    </tr>
                    <tr>
                        <td style="padding-top:10px"><div>Font Family:</div></td>
                        <td style="padding-top:10px">
                            <div style="max-width: 200px">
                            <select id="ddl">
                                <option value="Arial">Arial</option>
                                <option value="Serif">Serif</option>
                                <option value="Sans-serif">Sans-serif</option>
                                <option value="Cursive">Cursive</option>
                                <option value="Fantasy">Fantasy</option>
                            </select>
                        </div></td>
                    </tr>
                    <tr>
                        <td style="padding-top:10px"><div>Font Size:</div></td>
                        <td style="padding-top:10px">
                            <div style="max-width: 200px">
                            <select id="ddl1">
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="50">50</option>
                            </select>
                        </div></td>
                    </tr>
                </tbody>
            </table>
            <br>
            <button id="draw">Draw</button>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
  text-align: center;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#signature-control {
  height: 300px;
  width: 500px;
  float: left;
}

#signature {
  border: 1px solid lightgray;
}

#input {
  margin-top: 30px;
  margin-right: 20px;
  float: right;
}

#text {
  height: 30px;
}