Edit in JSFiddle

var rect;

window.onload = function(){
    var paper = Raphael(0,0,"100%","100%");
    rect = paper.rect(0,0,100,100)
        .attr({fill:"90-#804-#202-#305"});
}

    function extendX(){
        //幅を拡げる
        rect.scale(1.5,1,0,0);
    }
    
    function extendY(){
        //高さを拡げる
        rect.scale(1,1.5,0,0);
    }
        
    function getBox(){
        //位置サイズの取得
        var box = rect.getBBox();
        $("#result").empty();
        $("#result").append("X座標:" + box.x + "<br>");
        $("#result").append("Y座標:" + box.y + "<br>");
        $("#result").append("幅:" + box.width + "<br>");
        $("#result").append("高さ:" + box.height);
    }

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
    <div class="text">
        GETBBOX
        <br>
        <input type="button" value="幅拡張" onclick="extendX()" />
        <input type="button" value="高さ拡張" onclick="extendY()" />
        <input type="button" value="サイズ取得" onclick="getBox()" />
        <div id="result"></div>
    </div>
</div>

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#ccc;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    width:60%;
    height:60%;
    position:absolute;
    left:20%;
    top:40%;
    z-index:1;
}
#result{
    font-size:60%;
    letter-spacing: 5px;
}
input{
    padding:3px;
}