Convert line to image in kinetic js v5.0.0 - angularjs

Question

I have a line as shown below
Line attributes are
When I convert it to image using following code,
var nClone=$scope.currLine.clone(); // $scope.currLine has kinetic line info
$scope.currLine.remove(); // remove form layer as we have its clone
var pArr=nClone['attrs']['points'];
var i,wIs,hIs;
var xIs=0;
var yIs=0;
// to set width and height of image from line points
var arrLen=pArr.length;
for(i=0; i<arrLen;i){
if(i>=arrLen){
break;
}
wIs=Math.abs(pArr[i]-pArr[i+2]); // calculating difference
hIs=Math.abs(pArr[i+1]-pArr[i+3]);
i=i+4;
}
nClone.toImage({
x:xIs,
y:yIs,
width:wIs,
height:hIs,
callback: function(graphicImage){
console.log(graphicImage.src);
}
});
The image that I get is
I have tried a lot to set the line at 0,0 position any suggestion? Thanks

Answer 1

I am able to convert line to image:
var line = new Kinetic.Line({
points: $scope.points, // any 4 points 10 20 40 50
stroke: 'green',
strokeWidth: '2',
lineCap: 'round',
lineJoin: 'round'
});
var pArr=line['attrs']['points']; // calculate width and height
width=Math.abs(pArr[0]-pArr[2]);
height=Math.abs(pArr[1]-pArr[3]);
imgXis=pArr[0];
imgYis=pArr[1];
var shImage = line.toDataURL({
x:imgXis,
y:imgYis,
width:width,
height:height
});