Building a Captcha using HTML5 Canvas7 min read

CAPTCHA (/kæp.ə/, an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”) is a type of challenge–response test used in computing to determine whether or not the user is human.[1]
The term was coined in 2003 by Luis von AhnManuel Blum, Nicholas J. Hopper, and John Langford.[2] The most common type of CAPTCHA was first invented in 1997 by two groups working in parallel: (1) Mark D. Lillibridge, Martin AbadiKrishna Bharat, and Andrei Z. Broder; and (2) Eran Reshef, Gili Raanan and Eilon Solan.[3] This form of CAPTCHA requires that the user type the letters of a distorted image, sometimes with the addition of an obscured sequence of letters or digits that appears on the screen. Because the test is administered by a computer, in contrast to the standard Turing test that is administered by a human, a CAPTCHA is sometimes described as a reverse Turing test.

This user identification procedure has received many criticisms, especially from disabled people, but also from other people who feel that their everyday work is slowed down by distorted words that are difficult to read. It takes the average person approximately 10 seconds to solve a typical CAPTCHA.[4]

Demo

On the similar lines, we are going to build a simple Captcha, which is going to validate a form before submitting it. Here is how it is going to look like

Live demo of the same can be found here: arvindr21.github.io/captcha

So, let’s get started.

Design

The Captcha module that we are going to create in this post can be tightly coupled with an existing form or can be used in a generic way.

We are going to have a container that the app owner is going to provide. The captcha and the input field are going to be created inside this container.

To generate the passcode, we are going to use  Math.random() in combination with a computed scenario of uppercase or lowercase letters.

The input field will be publishing two events on keyup.  captcha.success when the validation of text box value matches the generated passcode &  captcha.failed when the values do not match. The “form owner” is going to listen to these events and work with it to get to know if the captcha is valid or invalid.

In the sample form we are building, we are going to enable or disable the submit button based on the above events.

And we are going to style the text in canvas as well to add some randomness.

So, let’s get started.

Setup Simple Login Form

We are first going to setup a simple login form using Twitter Bootstrap 4. We are going to use Signin Template for Bootstrap for the same.

Anywhere on your machine, create a folder named  login-form-with-captcha and inside that create a new file named  index.html.

Update  index.html  as shown below

I have borrowed the structure and styles from Signin Template for Bootstrap and built the above page.

As you can see, the Sign in button is disabled on load. We will enable the button once the Captcha is valid. We will do this in the later sections.

If you open the page in the browser, it should look something like


A simple form for a simple job!

Setup Captcha

Now, we are going to setup the container where the Captcha is going to appear. Just above the button tag,  we will add the Captcha container

Next, we are going to create a file named  captcha.js in the  login-form-with-captcha folder and then we will link the same to  index.html  just after the form tag as shown below

The basic  captcha.js would be structured this way

The above code is an IIFE with a Module pattern.

If we save the above file and refresh the browser, we should see the following in the console

Now, we will flesh out the remaining code.

Develop Captcha module

Now that we have a basic structure, we will continue building the plugin. First we are going to setup the  init()

Init()

In  init(), we are going to do the following

  1. Get the captcha container
  2. If container does not exists, exit the initialisation
  3. Create a canvas element & an input text element
  4. Setup Canvas
  5. Setup Textbox
  6. Bind events on Textbox
  7. Generate Passcode
  8. Set Passcode
  9. Render component on page

The Updated  init() would look like

setupCanvas()

We are going to setup a canvas element as shown below

We are setting up a canvas with the width of the parent container and height of 75px.

setupTB()

The text box will be setup as shown below

We have updated the type of input field and added a className and a placeholder. Next, we are going to bind events to the input field. The .are the events that the parent application consuming this captcha would be listening to.

bindTBEvents()

On keyup, we are going to validate the passcode against the input field

We have created 2 events

  1. When the validation is successful
  2. When the validation failed

Pretty straight forward.

generatePasscode()

Below is the logic to generate a random passcode.

Scripting to the rescue!

setPasscode()

To  setPasscode() , we are going to add two more helper functions that create a random font color for a character.

And then finally

render()

Now that we have all the pieces ready, we will render the canvas and text box on the page

This concludes our Captcha module.

The final  catpcha.js would be as follows

Setup Validation

Now, we are going to setup the validation on the form. After including  catpcha.js in the  index.html

The complete  index.html would be as follows

Save all the files and when we refresh the page in the browser, we should see

You can find the above code here: arvindr21/captcha.


Thanks for reading! Do comment.
@arvindr21