How to render an html element using phantomjs

How to render an html element using phantomjs

I want to save the image inside the div specified in the code. But using
the code below i'm not getting the exact image. ie. the output is shifted
by a large amount. Is this the correct way to do it? I'm just a beginner
in phantomjs. So Please help.
var page = require('webpage').create();
page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector",
function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
var clipRect = page.evaluate(function () {
return document.querySelector(".span7 demo").getBoundingClientRect(); });
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
window.setTimeout(function () {
page.render('capture.png');
phantom.exit();
}, 200);
}
});