kineticjs - Kinetic JS - Put length of a line on top of it -

i calculating length of line draw on canvas using following:

layer.on("mouseup", function () {                 moving = false;                 var mousepos = stage.getmouseposition();                 x2 = mousepos.x;                 y2 = mousepos.y;                 $("#distance").val(calculatedistance(x1, y1, x2, y2));              }); function calculatedistance(x1, y1, x2, y2) {             var distance = math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));             distance *= 0.264583333;             distance = math.round(distance * 100 / 1) / 100;             return distance; } 

currently putting distance in input field; add lable line! demo @ http://jsfiddle.net/user373721/xzead/1/.

i appreciate suggetions, in advance.

you need midpoint , label. customize fit needs.

http://jsfiddle.net/xzead/2/

            var midx = (line.getpoints()[0].x + line.getpoints()[1].x)/2;             var midy = (line.getpoints()[0].y + line.getpoints()[1].y)/2;             var label = new kinetic.text({                 x: midx,                 y: midy,                 text: calculatedistance(x1, y1, x2, y2),                 fontsize: 20,                 fontfamily: 'calibri',                 fill: 'green'             });             layer.add(label);             layer.draw();