Signature control using Canvas

<script type="text/javascript">

        var ctx, cnvs;

        $(document).ready(function () {

            cnvs = document.getElementById("cnvs");

            ctx = cnvs.getContext("2d");

            cnvs.onmousedown = function (e) {

                ctx.beginPath();

                ctx.moveTo(e.offsetX, e.offsetY);

                cnvs.onmousemove = function (e) {

                    ctx.lineWidth = 2;

                    ctx.lineTo(e.offsetX, e.offsetY);

                    ctx.stroke();

                }

            }

            cnvs.onmouseup = function (e) {

                cnvs.onmousemove = null;

            }

            $("#btnSave").click(function () {               

                var imgUrl = cnvs.toDataURL("");

                $("#imgSign")[0].src = imgUrl;

            });

        });       

    </script>

<div>

   <canvas id="cnvs" width="300" height="200" style="border: 1px solid #808080"></canvas>

  <input type="button" value="Save" id="btnSave"/>

  <br />

  <img id="imgSign" />

</div>