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

actually have set of points when connected forms pipes connected horizontally , vertically. want animation pipes 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 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 want particles move 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 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 animations in different canvas , in differen page. combine them effect of water flow.

i this. particle cannot seen no errors.

please help.

thank in advance

you can adding line

ctx1.globalalpha = 0.7;   

in function drawpipe() (at line 183).
act making pipes transparent 1 0.7

or can draw circle after pipes has been drawn.