title: Change the color of the "screen" waves
body: <p>I been stuck on getting the waves to look just like I want. I'm trying to figure out how to get the base of the wave to be the color I need it. I can do my desired color but it blocks the background. I can not see anything behind it because I was using like a reflection. Maybe someone can figure it out cause I'm having difficulties getting it to work... I plan on making the wave drop and rise. Here is a link to the code pen: <a href="https://codepen.io/RTarson/pen/ZVZVJW" rel="nofollow noreferrer">HERE</a></p>
  
  <p>Here is where I have the vertical reflection:</p>
  
  <pre><code>var x = $.cx - $.length / 2 + $.length / $.count * i,
      y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
      $.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
    }
  
    $.ctx.lineTo($.w, $.h); // -$.h - Vertically reflection
    $.ctx.lineTo(0, $.h); // -$.h - Vertically reflection
    $.ctx.closePath();
    $.ctx.fillStyle = color;
  
    if (comp) {
      $.ctx.globalCompositeOperation = comp;
    }
  
    $.ctx.fill();
  </code></pre>
  
  <p>My desired look for the waves is below:</p>
  
  <p><a href="https://i.stack.imgur.com/WC3yr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WC3yr.png" alt="The way I want it to look"></a></p>
  
  <p>Here is what I got with a successful transparent top, just not the right coloring:
  <a href="https://i.stack.imgur.com/6V3qD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6V3qD.png" alt="Not my desired look"></a></p>