Segcaptcha

by flaiming

HTML

<canvas width="400" height="400" id="cv"></canvas>
<input type="button" value="Validate" id="validate_button" />

JavaScript

var RADIUS = 5;
var AREA_SIZE = {width: 400, height: 400};
var circles = []
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');



function inCircle(x, y, circle, radius) {
    radius = typeof raduis !== 'undefined' ? radius : RADIUS;
    var dx = x- circle.x,
    dy = y- circle.y;

    //see if the distance between the click is less than radius
    if( dx * dx + dy * dy < radius * radius  ){
        return true;
    }
    return false;
}

function inCircles(x, y) {
    $.each(circles, function() {
        if (inCircle(x,y,this))
            return true;
    }); 
    return false;
}

///////////////////
var Circle = function(radius, x, y) {
    this.r = radius;
    this.x = x;
    this.y = y;
    
    var instance = this;
    
    this.toString = function() {
        return '('+this.x+', '+this.y+')';        
    }
} 

function clearCanvas() {
    ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
}

function drawCircle(data) {
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(data.x, data.y, data.r, 0, Math.PI * 2);
    ctx.fill();
}

function drawCircles() {
    $.each(circles, function() {
        drawCircle(this); 
    }); 
} 
 
$('#cv').mousedown( function( e ){
    lastX = e.pageX - $(this).offset().left;
    lastY = e.pageY - $(this).offset().top;
    clearCanvas();
    
    arr = []
    notInCircle = true
    $.each(circles, function() {
        if (!inCircle(lastX,lastY,this)) {
            arr.push(this);
        } else {
            notInCircle = false;
        }
    }); 
    circles = arr;
    if (notInCircle) {
        circle = new Circle(
            RADIUS, 
            lastX, 
            lastY
        );
        circles.push(circle);
    }
    drawCircles();
});