Two animations to be performed in a single page one over the other in canvas

Question

Actually i have a set of points which when connected forms like pipes connected horizontally and vertically. I want an animation to the pipes like this

var canvas1 = $("#mainCanvas1")[0];
var ctx1 = canvas1.getContext("2d");
var points = [[250,300],[250,150],[450,150],[450,50],[150,50],[150,300]];
var gradColor = ["#1FB0FF","#0AA9FF", "#009FF5",'#0092E0', "#0085CC"];
drawConnectionPipe(ctx1,points,15,gradColor[0],gradColor[1], gradColor[2],gradColor[3], gradColor[4]);
function drawConnectionPipe(ctx,coorinateArray,thickness,gradColorLight1, gradColorLight2,gradMidColor,gradColorDark1, gradColorDark2){
    ctx.save();
    gradColorNew = [gradColorDark2,gradColorLight1, gradColorLight2,gradMidColor,gradColorDark1];

    var gradientObject = null;
    for(var i=0; i<coorinateArray.length-1; i++){
        var startPt = coorinateArray[i];
        var endPt = coorinateArray[i+1];
        gradientObject = ctx.createLinearGradient(startPt[0],startPt[1],endPt[0] , endPt[1]);

        gradientObject.addColorStop(0, gradColorLight1);
        gradientObject.addColorStop(0.25, gradColorLight2);
        gradientObject.addColorStop(0.5, gradMidColor);
        gradientObject.addColorStop(0.75, gradColorDark1);
        gradientObject.addColorStop(1, gradColorDark2);
        ctx.lineWidth=thickness;
        ctx.strokeStyle = gradientObject;
        ctx.lineJoin = "round";

        ctx.beginPath();
        ctx.moveTo(startPt[0],startPt[1]);
        ctx.lineTo(endPt[0], endPt[1]);
        ctx.closePath();
        ctx.stroke();
        //ctx.globalCompositeOperation = 'source-over';
    }
    // chnge the order
    window.setTimeout(gameLoop, 150);
    function gameLoop() {
        if(gradColorNew.length == 5){

            drawConnectionPipe(ctx,coorinateArray,thickness,gradColorNew[0],gradColorNew[1], gradColorNew[2],gradColorNew[3], gradColorNew[4]);
        }
    }
    ctx.restore();
}    

and inside that i want particles to move like this.

var ParticleGen = function () {
    var particle = this;
    // begin
    // directions, upto
    this.begin = function () {
        var pipeBegin = points[pipeIndex];
        var pipeEnds = points[pipeIndex + 1];
        nx = pipeBegin.x;
        ny = pipeBegin.y;
        if (pipeBegin.x == pipeEnds.x) {
            if (pipeBegin.y > pipeEnds.y) {
                // endpoint y greater than start point y moving upwards
                d = "up";

                function animloop() {
                    if (ny > pipeEnds.y) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        ny--;
                        nx = nx;
                        requestAnimFrame(animloop);
                    }else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop);
                        particle.callBegin();
                    }

                }
                animloop();
            } else if (pipeBegin.y < pipeEnds.y) {
                d = "down";

                function animloop1() {
                    if (ny < pipeEnds.y) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        ny++;
                        nx = nx;
                        requestAnimFrame(animloop1);
                    } else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop1);
                        particle.callBegin();
                    }

                }
                animloop1();

            } 
        } else if (pipeBegin.y == pipeEnds.y) {
            if (pipeBegin.x < pipeEnds.x) {
                // start.x < end.x right movement
                d = "right";

                function animloop2() {
                    if (nx < pipeEnds.x) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        nx++;
                        ny = ny;
                        requestAnimFrame(animloop2);
                    } else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop2);
                        particle.callBegin();
                    }

                }
                animloop2();
            } else if (pipeBegin.x > pipeEnds.x) {
                d = "left";

                function animloop3() {
                    if (nx > pipeEnds.x) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        nx--;
                        ny = ny;
                        requestAnimFrame(animloop3);
                    } else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop3);
                        particle.callBegin();
                    }

                }
                animloop3();

            } else if (nx == pipeEnds.x) {
                cancelAnimationFrame(animloop2);
                particle.callBegin();
            }
        }
    }
    this.callBegin = function () {
        if (pipeIndex <= 3) {
            pipeIndex++;
            console.log(pipeIndex)
            particle.begin();
        }

    }
};

function drawCircle(cx, cy) {
    // console.log(cx+ " :cx, cy: "+cy+ " : drawCircle")
    ctx.beginPath();
    ctx.arc(cx, cy, 2, 0, 2 * Math.PI, false);
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.closePath();
}

I have both the animations in different canvas and in differen page. I would like to combine them to get the effect of water flow.

I could do like this. But the particle cannot be seen with no errors.

Please help.

Thank you in advance

Answer 1

you can do it by simply adding a line

ctx1.globalAlpha = 0.7;  

in your function drawpipe() (at line 183).
this act as making your pipes transparent from 1 to 0.7

or you can draw your circle after pipes has been drawn.