html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

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

​

var start;

var finish;

​

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();

});

​

// this is to be performed on a click

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

​

stage.listenOnce("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);

});

​

stage.suspend();

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

    var left = Math.random() * 300;

    var qwer = Math.random() * 300;

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

    rect.fill('green');

}

stage.resume();

});