Thursday, 22 August 2013

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>

No comments:

Post a comment