Hi anjali600,
Refer below sample.
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="btnType" type="button" value="Type" />
<input id="btnDraw" type="button" value="Draw" />
<hr />
<input id="txtType" type="text" placeholder="Type Here" style="width: 500px; height: 200px;" />
<div id="dvSignature" style="display: none;">
<div class="tools">
<a href="#colors_sketch" data-tool="marker">Marker</a>
<a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc;"></canvas>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnType]').on('click', function () {
$('[id*=txtType]').attr('style', 'display:block;width: 500px; height: 200px;');
$('[id*=dvSignature]').attr('style', 'display:none;');
});
$('[id*=btnDraw]').on('click', function () {
$('[id*=dvSignature]').attr('style', 'display:block;');
$('[id*=txtType]').attr('style', 'display:none;');
$('[id*=colors_sketch]').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
});
});
</script>
</body>
</html>
Demo
