how can i adjust middle wave up down position?

Question

I have been stuck on getting the waves to look just like I want. I'm trying to figure out how to get the middle of the wave to be the same as the attached image.

I have attached an image of what I actually want.

Let me know in a comment if you want more info from my side. Thanks

Here is my code.

 var canvas=document.getElementById('wave'); var ctx=canvas.getContext('2d'); var cw=Number(window.innerWidth); var ch=Number(window.innerHeight); canvas.width = Number(window.innerWidth); canvas.height = Number(window.innerHeight); var offsetX=0; var bk=makeWave(canvas.width,canvas.height-120,80,2,'lightskyblue','cornflowerblue'); requestAnimationFrame(animate); function animate(time){ ctx.clearRect(0,0,cw,ch); ctx.drawImage(bk,offsetX,0); offsetX-=1; if(offsetX< -bk.width/2){offsetX=0;} // requestAnimationFrame(animate); } function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){ var PI2=Math.PI*2; var totValue=PI2*wavesPerWidth; var c=document.createElement('canvas'); var ctx=c.getContext('2d'); c.width=width*2; c.height=midWaveY+amplitude; var grad=ctx.createLinearGradient(0,0,0,midWaveY); grad.addColorStop(0.00,grad0); grad.addColorStop(1.00,grad1); // ctx.beginPath(); ctx.moveTo(0,0); for (x=0;x<=200;x++) { var n=totValue*x/134; ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY); } ctx.lineTo(c.width,0); ctx.closePath(); ctx.fillStyle=grad; ctx.fill(); return(c); }

 <canvas id="wave"></canvas>

Answer 1

Here it is:

You need to play with this line here:

var bk=makeWave(canvas.width,canvas.height-120,80,2,'lightskyblue','cornflowerblue');

Tweak the numbers, and the middle number will do the thing. See example below:

 var canvas=document.getElementById('wave'); var ctx=canvas.getContext('2d'); var cw=Number(window.innerWidth); var ch=Number(window.innerHeight); canvas.width = Number(window.innerWidth); canvas.height = Number(window.innerHeight); var offsetX=0; var bk=makeWave(canvas.width,canvas.height-120,25,2,'lightskyblue','cornflowerblue'); requestAnimationFrame(animate); function animate(time){ ctx.clearRect(0,0,cw,ch); ctx.drawImage(bk,offsetX,0); offsetX-=1; if(offsetX< -bk.width/2){offsetX=0;} // requestAnimationFrame(animate); } function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){ var PI2=Math.PI*2; var totValue=PI2*wavesPerWidth; var c=document.createElement('canvas'); var ctx=c.getContext('2d'); c.width=width*2; c.height=midWaveY+amplitude; var grad=ctx.createLinearGradient(0,0,0,midWaveY); grad.addColorStop(0.00,grad0); grad.addColorStop(1.00,grad1); // ctx.beginPath(); ctx.moveTo(0,0); for (x=0;x<=200;x++) { var n=totValue*x/134; ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY); } ctx.lineTo(c.width,0); ctx.closePath(); ctx.fillStyle=grad; ctx.fill(); return(c); }

 <canvas id="wave"></canvas>