$("#start_select").click(function() {

  $("#select_canvas").show();

});

​

$('*').bind('selectstart', false);

​

var start = null;

var ctx = $("#select_canvas").get(0).getContext('2d');

ctx.globalAlpha = 0.5;

​

$("#select_canvas").mousedown(function(e) {

    start = [e.offsetX, e.offsetY];

  for(var key in e)

    console.log("e key:"+e[key]);

}).mouseup(function(e) {

    end = [e.offsetX, e.offsetY];

    var x1 = Math.min(start[0], end[0]),

        x2 = Math.max(start[0], end[0]),

        y1 = Math.min(start[1], end[1]),

        y2 = Math.max(start[1], end[1]);

  console.log("("+x1+","+y1+")-("+x2+","+y2+")");

    var grabbed = [];

    $('*').each(function() {

        if(!$(this).is(":visible")) return;

      console.log("x1:"+x1+" x2:"+x2);

        var o = $(this).offset(),

            x = o.left,

            y = o.top,

            w = $(this).width(),

            h = $(this).height();

        if(x > x1 && x + w < x2 && y > y1 && y + h < y2) {

            grabbed.push(this);

        }

    });

    console.log(grabbed);

    start = null;

}).mousemove(function(e) {

    if(!start) return;

  //  ctx.clearRect(0, 0, this.offsetWidth, this.offsetHeight);

    ctx.beginPath();

    var x = e.offsetX,

        y = e.offsetY;

    ctx.rect(start[0], start[1], x - start[0], y - start[1]);

    ctx.fill();

});