Lasso

var element = $('#target_div');

// configure the canvas

var config = {

    width: 400,

    height: 400,

    y_up: true,

}

element.dual_canvas_helper(config);

​

var make_circles = function() {

    for (var i=20; i<400; i+=20) {

        for (var j=20; j<400; j+=20) {

            element.circle({name: ""+i+":"+j, x:i, y:j, r:4, color:"green"});

        }

    }

};

​

var lasso_callback = function(names_mapping) {

    // change lassoed elements to pink

    for (var name in names_mapping) {

        element.change(name, {color: "pink"});

    }

};

​

// Provide a name for the lasso polygon for reference.

var lasso_name = "my_lasso_polygon"

​

var reset_lasso = function () {

    // delete the lasso polygon if it exists

    element.forget_objects([lasso_name]);

    // make or replace the circles.

    make_circles();

    // Don't delete the lasso polygon automatically so we can admire it for a while.

    var delete_it=false;

    element.do_lasso(lasso_callback, {name: lasso_name}, delete_it);

};

​

// set up the lasso the first time.

reset_lasso();

​

$("<div>Please lasso some circles once to turn them pink.</div>").appendTo(element);

​

var reset_button = $("<button>Reset</button>").appendTo(element);

​

reset_button.click(reset_lasso);