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...