Using PaperJs to Animate the Drawing of a Line

Question

Since you are running the for-loop on every frame, you're re-creating the same line segments over and over, all at once. Instead, you need to add one segment per frame:

// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
// path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
function onFrame(event) {
    // Your animation code goes in here
    if (event.count < 101) {
        path.add(start);
        start += new Point(1, 1);
    }
}

The if statement serves as a limit for the line's length.

Also note that the path.moveTo(start) command does not mean anything if your path does not yet have any segments.

If you don't want to add points every frame, but only change the length of a line, simply change the position of one of the segments. First create add two segments to your path, then change the position of the second segment's point per frame event:

// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
path.add(new Point(100, 100));
path.add(new Point(100, 100));
// Move to start and draw a line from there
// path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
function onFrame(event) {
    // Your animation code goes in here
    if (event.count < 101) {
        path.segments[1].point += new Point(1, 1);
    }
}