Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    function drawRect(rectOptions){
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillStyle = rectOptions.colour;
        ctx.fillRect(rectOptions.x,rectOptions.y,rectOptions.h,rectOptions.w);
        ctx.font = '12px sans-serif';
        ctx.fillText(rectOptions.name, rectOptions.w + rectOptions.x, rectOptions.h + rectOptions.y);
    }
    function drawConnector(rect1,rect2){
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.moveTo(70,70);
        ctx.lineTo(240,70);
        ctx.closePath();
        ctx.stroke();

    }
</script>

</head>

<body>

<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var connector1 = new drawConnector(rect1,rect2);

var rect1 = new drawRect({
            h: 100,
            w: 100,
            x: 20,
            y: 20,
            colour: '8CB5CF',
            name: 'Office 1'
}
);
var rect2 = new drawRect({
            h: 100,
            w: 100,
            x: 280,
            y: 20,
            colour: '8CB5CF',
            name: 'Office 2'
}
);
alert(rect2[drawRect.h]);
</script>
</body>
</html>