Javascript chaining the same animation function with different parameters

Question

I am trying to animate a line two lines along a path, one then the other. Basically it will look like one line being drawn, stopping at a point, then another line being drawn somewhere else. So far I have come across promises and callbacks to achieve this, but being a javascript newbie this is confusing

Current animate function:

/*
*   Animation function draws a line between every point
*/              
var animate = function(p){
    return new Promise(function(resolve) {
        t = 1;
        var runAnimation = function(){
            if(t<p.length-1){
                context.beginPath();
                context.moveTo(p[t-1].x,p[t-1].y);
                context.lineTo(p[t].x,p[t].y);
                context.stroke();
                t++;
                requestAnimationFrame(function(){runAnimation()});
            } else {
                resolve()
            }
        };
        runAnimation();
    });
}

Current call to animate function:

animate(points).then(animate(secondary_points));

The points are similar to:

var points = [{x:100, y:200}];

And the paths the lines need to follow are just the multiple coordinates inside points and secondary_points

Ive tried many solutions on SO that were similar, but small differences cause me to either mess up or not understand the solution. The biggest issue I seem to have is calling the SAME animate function, with that animate function needing to be run on different parameters.

Without this solution, using

animate(points);
animate(secondary_points);

the lines are drawn somewhat at the same time, but the result is actually just randomly placed dots along the path instead of smooth lines, I assume because both are running at the same time.

How would I go about fixing this so that one line is drawn along path1 and then the second line is drawn along path2?

It is probably a simple solution, but Ive worked with JS for 3 days and my head is still spinning from getting used to some of the syntax of the old code Ive had to fix

Thank you

EDIT:

The full flow of the animation is as follows:

I have a php file that contains 2 canvases, each containing an image of a map. The php file has a couple <script/> tags, one of which calls the js script I am writing the animation on via drawPath(source,destination,true) or drawPath(source,destination,false)

The drawPath function uses the boolean to determine which canvas to get the context for, and then draw on the path from point A to point B via finding the path and creating the points mentioned above, then drawing using animate(). There are a couple breaks in the maps that require separate lines, which prompted my original question. I was able to fix that thanks to suggestions, but now I am having a larger issue.

If I need to go from point A on map A to point B on map B, ie

drawPath(source, end_point_of_map_A, true); is called then drawPath(start_point_of_map_B, destination, false);, the lines are drawn only on one map, and they are similar to before where they are 1. random and 2. incomplete/only dots

I am assuming this is due to the animation again, because it worked when just drawing the lines statically, and each animation works when going from point A to B on a single map

Any help is appreciated!

Edit:

DrawPath()

function drawPath(source, desti, flag) {
    /*
    * Define context
    */
    //lower
    if(!flag){
        var c = document.getElementById("myCanvas");
        context = c.getContext("2d");
    //upper
    } else {
        var cUpr = document.getElementById("myCanvasUpr");
        context = cUpr.getContext("2d");
    }
    /*
    * Clear the variables
    */
    points = [];
    secondary_points = [];
    vertices = [];
    secondary_vertices = [];
    t = 1;
    done = false;




    //check for invalid locations
    if (source != "" && desti != "") {
        context.lineCap = 'round';
        context.beginPath();

        /*
        * Get the coordinates from source and destination strings
        */
        var src = dict[source];
        var dst = dict[desti];

        /*
        * Get the point number of the point on the path that the source and destination connect to
        */

        var begin = point_num[source];
        var finish = point_num[desti];

        /*
        * Draw the green and red starting/ending circles (green is start, red is end)
        */
        context.beginPath();
        context.arc(src[0], src[1], 8, 0, 2 * Math.PI);
        context.fillStyle = 'green';
        context.fill();

        context.beginPath();
        context.arc(dst[0], dst[1], 6, 0, 2 * Math.PI);
        context.fillStyle = 'red';
        context.fill();

        /*
        * Call the function that draws the entire path
        */
        draw_segments(begin, finish, src, dst, flag);
        //window.alert(JSON.stringify(vertices, null, 4))
        /*
        * Edit what the line looks like
        */
        context.lineWidth = 5;
        context.strokeStyle = "#ff0000";
        context.stroke();

    }
}

Answer 1

A nice way to handle this is to put your lines into a an array where each element is a set of points of the line. Then you can call reduce() on that triggering each promise in turn. reduce() takes a little getting used to if you're new to javascript, but it basically takes each element of the array c in this case, does something and that something becomes the next a. You start the whole thing off with a resolve promise which will be the initial a. The promise chain will be returned by reduce to you can tack on a final then to know when the whole thing is finished.

For example:

let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d');
var animate = function(p){

    return new Promise(function(resolve) {
        t = 1;
        var runAnimation = function(){
            if(t<p.length-1){
                context.beginPath();
                context.moveTo(p[t-1].x,p[t-1].y);
                context.lineTo(p[t].x,p[t].y);
                context.stroke();
                t++;
                requestAnimationFrame(function(){runAnimation()});
            } else {
                resolve()
            }
        };
        runAnimation();
    });
}

// make some points:

let points = Array.from({length: 200}, (_,i) => ({x:i+1, y:i+2}))
let points2 = Array.from({length: 200}, (_,i) => ({x:300-i, y:i+2}))
let points3 = Array.from({length: 200}, (_,i) => ({x:i*2, y:100+100*Math.sin(i/10)}))

// create an array holding each set

let sets = [points, points2, points3]

// use reduce to call each in sequence returning the promise each time
sets.reduce((a, c) => a.then(() => animate(c)), Promise.resolve())
.then(() => console.log("done"))

<canvas id="canvas" height="300" width="500"></canvas>