from canvas-tag to captcha


In the last month I asked myself if there was any possibility to draw primitives in JavaScript. There are no functions for that but as we all know people tend to get creative. They make things possible with the scarce resources they have. So there are people who have implemented Bresenham’s line algorithm (using DIV’s ) in JavaScript and built libraries for JavaScript to draw all kinds of primitives.

I searched further and then I came across a HTML-tag called <canvas> .  <canvas> is basically an unofficial (meaning, not yet standardized by W3C?) tag created by Apple some years ago. It is a canvas where you can draw on. You have several inbuilt functions for lines, rectangles, arcs, etc. There’s some examples online. One of the more awesome examples is . It basically is a Microsoft Paint in the web-browser. There’s a small tutorial about <canvas>at

The first thing I tried to do was to make a simple drawing-example in JavaScript. I didn’t want to reinvent the complex Canvaspaint but to try it out and learn it. That’s how I started my ‘canvastest’-project. The whole thing is made using HTML, CSS and JavaScript. It’s very simple and doesn’t offer too many possibilities. You can draw Lines and Circles, change the line width and undo. In the lower part of the screen there’s a ‘logscreen’ which saves all actions for undo. If you have an idea how to extend it, feel free. Just take the source and extend it or transform it into something totally different. But if you do, please inform me. I’d like to see it!

canvastest screenshot:



What does the <canvas>-tag have in common with captchas. But … what are captchas?

Captchas are those whirled up texts (which I often can’t decipher) and try to separate men (of course also women and children) from machines. The big web-companies (but not only) like Google, Yahoo, Myspace had to implement some sort of mechanism to sort out bots which create new accounts for spamming (remember this  monty python sketch?).

A human can decipher a whirled up text quite easily compared to a computer. But because new algorithms are created which offer better recognition it is getting harder to make good captchas. There’s even companies in India and China which offer captcha-solving for low rates. Some genius even started redirecting the captchas on porn-pages so those who want to see naked flesh first have to pump some blood in the brain and solve the captcha before ‘working out’. Not bad.

Anyway… what do I have to offer? While I played around with the canvastest I had the idea to make a graphical captcha. What about an image which displays a ‘path’ and needs to be clicked on each ‘waypoint’ to get a correct result. So the captcha basically is a bunch of connected dots and have to be clicked on in the right order to get the “Okay”. Sounds easy? I really don’t know how well the algorithms for detecting this are. Another idea was not to connect the dots but just place numbers near the dots so you know which to click first. You could also make a color code. Maybe that would be easily hacked but right now I have only made a working  version using simple dot’s connected with lines. The starting dot is colored white. Test  captcha test. I’ll maybe add a part of the code behind it in the near future.

Captcha test screenshot