TomCAPTCHA

Prompt here




Information

To deal with different screen widths, when the page is loaded, the canvas' width is set to the width of main. Because of this, all draw commands for canvas are relative to cavnas width and height. The canvas is then divided into 5 equal squares using lines drawn on the canvas. To make these lines look consistent at different screen widths, I calculate a line width at page load and use this to draw these lines. To make the canvas element consistent, I also set the css border width to this calculated line width. Media queries are also used to make the main element fill the screen if its a mobile device.

The main program flow consists of some setup, then the main function called "displayCaptcha". Everything after that is an event. To handle multiple tries, the main function is simply called again and the failed attempt is kept track of in a counter.