Question: I am trying to draw a line with arrow at the tip of the line. But i am unable to complete it. Can any one help me.

I tried adding triangle with line but unfortunately it wont work while dynamically drawing. This is what i tried along with line.

```
    var myPath;

function onMouseDown(event) {
    myPath = new Path();
    myPath.strokeColor = 'black';
}

function onMouseDrag(event) {
    myPath.add(event.point);
}

function onMouseUp(event) {
    var myCircle = new Path.RegularPolygon(event.point, 3, 10);
    myCircle.strokeColor = 'black';
    myCircle.fillColor = 'white';
}

```

Answer: 
you draw line with arrow with this code ,

```
paper.Shape.ArrowLine = function (sx, sy, ex, ey, isDouble) {
function calcArrow(px0, py0, px, py) {
    var points = [];
    var l = Math.sqrt(Math.pow((px - px0), 2) + Math.pow((py - py0), 2));
    points[0] = (px - ((px - px0) * Math.cos(0.5) - (py - py0) * Math.sin(0.5)) * 10 / l);
    points[1] = (py - ((py - py0) * Math.cos(0.5) + (px - px0) * Math.sin(0.5)) * 10 / l);
    points[2] = (px - ((px - px0) * Math.cos(0.5) + (py - py0) * Math.sin(0.5)) * 10 / l);
    points[3] = (py - ((py - py0) * Math.cos(0.5) - (px - px0) * Math.sin(0.5)) * 10 / l);
    return points;
}

var endPoints = calcArrow(sx, sy, ex, ey);
var startPoints = calcArrow(ex, ey, sx, sy);

var e0 = endPoints[0],
    e1 = endPoints[1],
    e2 = endPoints[2],
    e3 = endPoints[3],
    s0 = startPoints[0],
    s1 = startPoints[1],
    s2 = startPoints[2],
    s3 = startPoints[3];
var line = new paper.Path({
    segments: [
        new paper.Point(sx, sy),
        new paper.Point(ex, ey)
    ],
    strokeWidth: 1
});
var arrow1 = new paper.Path({
    segments: [
        new paper.Point(e0, e1),
        new paper.Point(ex, ey),
        new paper.Point(e2, e3)
    ]
});

var compoundPath = new paper.CompoundPath([line, arrow1]);
if (isDouble === true) {
    var arrow2 = new paper.Path({
        segments: [
            new paper.Point(s0, s1),
            new paper.Point(sx, sy),
            new paper.Point(s2, s3)
        ]
    });

    compoundPath.addChild(arrow2);
}

return compoundPath;};

```

use

```
tool.onMouseDrag = function (event) { this.item = new paper.Shape.ArrowLine(event.downPoint.x, event.downPoint.y, event.point.x, event.point.y);
            this.item.removeOnDrag();}

```
There is an example code in paperjs refrence which draws an arrow at the end of a vector.  

Have a look at: <http://paperjs.org/tutorials/geometry/vector-geometry/> (scroll all the way down to the end of the page)