Search results

Draw a Signature in JavaScript Signature control

18 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
app.ts
index.html
styles.css
Copied to clipboard
import { Signature } from '@syncfusion/ej2-inputs';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Button } from '@syncfusion/ej2-buttons';

let signature: Signature = new Signature({});
signature.appendTo('#signature');

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

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

let button: Button = new Button({cssClass: 'e-primary'}, '#draw');

button.element.onclick = function (e) {
    let text: string = document.getElementById('text').value;
    let font: string = ddlObj.value;
    let size: number = 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.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <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>
</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;
}