canvas-tag
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 http://canvaspaint.org/ . It basically is a Microsoft Paint in the web-browser. There’s a small tutorial about <canvas>at mozilla.org.
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:
captcha
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
I will change this later... 
Oh, that’s kind of a cool thought. A behavioral captcha. That’d be easier than letters (c.p., http://dpatrickcaldwell.blogspot.com/2009/02/completely-automated-public-turing-test.html). But, if you do white dots vs. yellow dots, it’d probably be pretty easy for someone to code a hack for it. I presume you can read the canvas with JS as well, n’est-ce pas?
Actually I didn’t use a canvas in my captcha. It’s a simple PNG-image. Maybe there’s some algorithm to recognize the lines and therefore the connected ‘dots’. But if we would make a version without connecting lines but only with the dots themselves and some kind of color encoding (four dots. coloured blue, red, green, yellow. then it says “click on the colours in the following order: yellow, blue, green, red”).