Draw in EJ2 TypeScript 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”.

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);
};
<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>
#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;
}