How To Capture Signature using HTML5 Canvas

We had published javascript library for signature pad using html 5 canvas. In this post we described about how to capture signature using HTML5 Canvas. Here we are using To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods. beginPath() method to declare that we are about to draw a new path. lineTo() method to draw a straight line from the starting position to a new position. we can apply a stroke to the line using stroke().

signature_pad

<canvas id="sign_canvas" width="400" height="250" style="border:1px solid;margin-bottom:10px;"></canvas>

Draw Simple Line :

<script>
      var canvas = document.getElementById('sign_canvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(450, 50);
      context.stroke();
    </script>

Download Script

Comments

comments

phpexpertise

I’m Blogger and Programming Blog, Tutorials, PHP, MySQL, jQuery, Laravel, Wordpress and Codeigniter