در اینجا قصد داریم با استفاده از یک نمونه HTML5 Canvas را توضیح دهیم . Html Canvas قسمتی در صفحه های وب برای ایجاد متن یا تصویر گرافیکی با استفاده از کشیدن خط می باشد. امضا آنلاین روی صفحات وب ، موبایل ها ، تبلت ها و ... با استفاده از HTML 5 Canvas و اسکریپتهای jQuery انجام می شود .

Html Canvas  قسمتی در صفحه های وب برای ایجاد متن یا تصویر گرافیکی با استفاده از کشیدن خط می باشد. امضا آنلاین روی صفحات وب ، موبایل ها ، تبلت ها و ...  با استفاده از HTML 5 Canvas   و اسکریپتهای jQuery انجام می شود . Canvas  دارای متدهای مختلفی برای کشیدن طرح ها است.   

صفحه HTML شامل یک div  با دو لینک برای انتخاب قلم و پاک کن  و یک دکمه برای ثبت تصویر است. در قسمت زیر کد لینکهای انتخاب رنگ و قلم و دکمه ذخیره را می بینید .

<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">
</canvas>
<br />
<br />
<input type="button" id="btnSave" value="Save as Image" />
<hr />
<img id = "imgCapture" alt = "" style = "display:none;border:1px solid #ccc" />

از اسکریپت های jQuery  در HTML Canvas  استفاده می شود . هر دوی لینکهای انتخاب قلم و پاک کن به یک رویداد برای روشن شدن گزینه انتخاب شده اشاره می کنند . دکمه ها به یک کنترل رویداد jQuery اشاره می کنند که با فشرده شدن با استفاده از تابع DataURL به رشته های 64 بیتی تبدیل می شوند .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#colors_sketch').sketch();
        $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        });
        $("#btnSave").bind("click", function () {
            var base64 = $('#colors_sketch')[0].toDataURL();
            $("#imgCapture").attr("src", base64);
            $("#imgCapture").show();
        });
    });
</script>