Boxes with g9

boxes.js

var initialData = {
    size: 100.0,
    padding: 20.0
}

function render(data, ctx) {
    for(var i=0; i<30; i++) {
        var padding = data.padding;
        var rowItems = Math.floor(ctx.width/(data.size+padding));
        var step = data.size+padding;
        var x = (i%rowItems)*step-ctx.width/2.0;
        var y = Math.floor(i/rowItems)*step-ctx.height/2.0;
        var paddingParams = {affects:['padding'],'fill':'#66ff00'};
        var sizeParams = {affects:['size'],'fill':'#ff6600'};
        ctx.rect(x,y,data.size,data.size,sizeParams);
        ctx.rect(x+data.size,y,padding,data.size,paddingParams);
        ctx.rect(x,y+data.size,data.size,padding,paddingParams);
    }
}

var demo = g9(initialData, render).align('left', 'top');