title: Animate sine wave, fixed start and end points
body: <p>I have a sine wave in my canvas that is animated, swaying left and right. What I am trying to achieve is that the start and end points stay fixed. How to achieve that?</p>
  
  <p>Here is the <a href="https://codepen.io/pw17l008/pen/BeKmeO" rel="nofollow noreferrer">Code Pen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function start() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawCurves(context, step);
  
    step += 5;
    window.requestAnimationFrame(start);
  }
  
  var step = -4;
  
  function drawCurves(ctx, step) {
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "rgb(66,44,255)";
  
    var x = 4;
    var y = 0;
    var amplitude = 20;
    var frequency = 90;
    while (y &lt; height) {
      x = width / 2 + amplitude * Math.sin((y + step) / frequency);
      ctx.lineTo(x, y);
      y++;
    }
    ctx.stroke();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    background-color: wheat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body onload="start()"&gt;
  
    &lt;canvas id="canvas" width="500" height="2000"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>