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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/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>#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;
}