Search results

Draw a Signature in JavaScript (ES5) Signature control

24 May 2022 / 1 minute 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”.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
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);
};
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.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>
Copied to clipboard
#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;
}