Simple Captcha using java script

Here you get simple way to apply captcha for your site using java script.

Steps to drive captcha on html page:

1)Assign canvas tag and image tag  on html page with width and height  whatever size you want,
2)Generate Random String of Alpha-numeric character.
3)Convert that random string to canvas->Image and print it on page.

For reCaptcha 

1)just clear the previous canvas and refill it with random string.


 Step 1: //here is html code :


  <div>
  <canvas id='textCanvas' width=100 height=40></canvas>
  <img id='image'>
  <br>
<img id="refresh_captcha" src="/oltapp/ButtonImages/Refresh.png" onClick="randomString();"/>
  </div>

Step 2: //java script

  <script type="text/javascript">

    

     // captcha when document get reload
 

         $(document).ready(function(){
         $("#refresh_captcha").click();
     
         });

      function randomString() {

   

           // Genrate random string
     

           var randomstring = '';

            var chars = "0123456789ABCDEFGHIJKL!@#$%^&*()MNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";

        var string_length = 5;  //Length of Captcha

        for (var i=0; i<string_length; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum,rnum+1);
        }

        // Getting canvas variable
        var tCtx = document.getElementById('textCanvas').getContext('2d'),
        imageElem = document.getElementById('image');



        tCtx.font= "normal 24px Verdana";  //set text fonts option for  canvas,html5 canvas: Text Option

        tCtx.strokeStyle = "#000000";    //html5 canvas: Text Option
        

        tCtx.clearRect(0,0,100,40);        //Clear previous Canvas for redraw our captcha

        tCtx.strokeText(randomstring,30,20,70);  //Stroke random string to canvas
 

        tCtx.textBaseline = "middle";                  //html5 canvas: Text Option,line in middle of text

        imageElem.src = tCtx.canvas.toDataURL(); // provide canvas url to image src
 

        console.log(imageElem.src);  //image

    }

</script>

now we having captcha when document get ready and when click on refresh button,From HTML5 Canvas option you can set background image or another text style in captcha and having different options to make your captcha attractive.

example captcha:

For more HTML5 Canvas:Text Option - http://createdynamicgraph.blogspot.in/