JS to achieve water ripple background

<! DOCTYPE html>html, Body {width:100%; height:100%; padding:0; margin:0;} </style> //get the canvas container          varCanvas = document.getElementById (' Canvas '); //Get brushes          varCTX = Canvas.getcontext (' 2d '); //Canvas Setting widthCanvas.width =Canvas.parentNode.offsetWidth; //Canvas Setting HeightCanvas.height =Canvas.parentNode.offsetHeight; //if the browser supports requestanimframe use requestanimframe otherwise use settimeoutWindow.requestanimframe = (function(){           returnWindow.requestanimationframe | |Window.webkitrequestanimationframe||Window.mozrequestanimationframe||function(callback) {Window.settimeout (callback,1000/60);           };           })(); //Wave size          varBoheight = CANVAS.HEIGHT/10; varPosheight = canvas.height/1.2; //Initial angle of 0          varStep = 0; //defines the color of three different waves          varlines = ["Rgba (0,222,255, 0.2)", "Rgba (157,192,249, 0.2)", "Rgba (0,168,255, 0.2)"]; functionLoop () {//Clear Canvas ContentCtx.clearrect (0,0, Canvas.width,canvas.height); Step++; //draw a rectangle of 3 different colors                for(varj = lines.length-1; J >= 0; j--) {Ctx.fillstyle=Lines[j]; //each rectangle has a different angle, with a 45 degree difference between each                varAngle = (step+j*50) *math.pi/180;varDeltaheight = Math.sin (angle) *Boheight; varDeltaheightright = Math.Cos (angle) *Boheight;                Ctx.beginpath (); Ctx.moveto (0, posheight+deltaheight); Ctx.beziercurveto (Canvas.width/2, Posheight+deltaheight-boheight, CANVAS.WIDTH/2, Posheight+deltaheightright-boheight, Canvas.width, posHeight+deltaheightright);                 Ctx.lineto (Canvas.width, canvas.height); Ctx.lineto (0, Canvas.height); Ctx.lineto (0, posheight+deltaheight);                 Ctx.closepath ();            Ctx.fill ();          } requestanimframe (loop);      } loop (); </script></body>
JS to achieve water ripple background