html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

var stage = acgraph.create("container");

​

var start;

var finish;

// a layer for green squares to be reused each new generation

var rectLayer = stage.layer();

var labelBg = stage.rect();

var label = stage.text(130,130);

​

label.text("Click here to start the process of rendering");

var labelBounds = label.getBounds();

labelBg

    .setX((labelBounds.left)-20)

    .setY((labelBounds.top)+20)

    .setWidth(labelBounds.width+40)

    .setHeight(labelBounds.height-40)

    .fill("#fff")

    .stroke("#000")

    .cursor("pointer");

label.zIndex(1000000);

label.disablePointerEvents(true);

labelBg.zIndex(1000000);

​

stage.listen("renderstart", function(){

    start = (new Date()).getTime();

});

​

stage.listen("renderfinish", function(){

    finish = (new Date()).getTime();

    label.text((finish - start) + "ms");

    var labelBounds = label.getBounds();

    labelBg

.setX((labelBounds.left)-20)

.setY((labelBounds.top)+20)

.setWidth(labelBounds.width+40)

.setHeight(labelBounds.height-40);

});

​

// this is to be performed on a click

labelBg.listen("click", function(){

    // clear the layer

    rectLayer.removeChildren();

​

    stage.suspend();

​

    for (var i = 0; i < 500; i++) {

var left = Math.random() * 300;

var qwer = Math.random() * 300;

​

var rect = rectLayer.rect(left, qwer, 10, 10);

rect.fill('green');

    }

​

    stage.resume();

});