Waves with Canvas

Introduction

Canvas is a rendering specification included in the latest version of HTML, HTML5. Canvas has actually been around for a while—it was present in Firefox 1.5, and Safari has had support for a few years. IE, of course, still doesn't have native support for Canvas but can be made to work using ExplorerCanvas. Since this is just a demonstration we'll leave that for another time.

Though many browsers are adding support for Canvas, performance across browsers isn't very consistent yet. Safari and Chrome lead the pack, but considering the power of most graphics cards today I expect that most browsers will have more than adequate performance in the near future.

We're going to start with the most basic html template possible. It's not particularly trendy, but it works fine for our example.

The Canvas Element

The first thing we do is grab the canvas element by its id. In order to manipulate the image inside of the canvas, we need to get its context. Right now '2d' is the only option defined in the canvas spec.

The draw() function is going to handle all of the actual drawing we'll be doing, so I went ahead and stubbed it out.

Canvas Tag CSS

We're going to use css to stretch the canvas over the entire window.

Primitive Shapes

Finally we're getting into some actual drawing. We're using canvas paths to draw a simple rectangle and fill it in with #000—black. moveTo() moves the point without actually drawing a path, and lineTo() draws a straight line between two points. Now we've got a wave, except it's totally calm murky water.

Manipulating Paths

Rather than just drawing a straight line across the top, now we'll draw a diagonal line.

I recommend copying these examples and modifying them to get a better feel for how the different canvas methods work.

Drawing with Curves

To start making our wave more wave-like, we're going to swap out our line with a curve. Canvas paths provide two methods for curves, bezierCurveTo() and quadraticCurveTo(). Quadratic curves have a single inflection point, whereas bezier curves have two. Just to simplify things, we'll start out with a quadratic curve.

The first two arguments of quadraticCurveTo() are the x and y coordinates of the constraining point. We're going to draw the constraining point in the middle of the canvas, 500px from the top. The preview should show curve that starts 300px from the top, dips down, then ends at 100px from the top.

A quadratic curve:

A bezier curve:

Transparency and rgba

Canvas has support for transparency using the rgba() notation. The first three values of rgba are red, green, and blue values between 0 and 255. The last value is a float between 0 and 1 that controls transparency.

Bezier Curves

Next, we make our wave a little more realistic by switching from a quadratic curve to a bezier curve. Instead of a single point in the middle of the canvas, we have two points evenly spaced at 1/3 and 2/3. We control the y values through randomLeftConstraint and randomRightConstraint.

Random Curves

In order to get a better idea of the shapes being produced, we'll modify our y-axis coordinates to be randomly generated integers between 0 and 500. Reload the page a couple of times to see the different shapes it produces.

Animation

Now that we have a static wave shape, it is time to animate it. setInterval() causes javascript to be executed repeatedly at a set interval. setInterval() will eval the first argument and the second argument specifies how often in milliseconds. 200ms is too slow for a realistic animation, but is fine for now.

Redrawing with Canvas

As you probably noticed from the preview, the screen just began filling up with black. The reason for that is during an animation, the canvas needs to be cleared after every draw. It is possible to draw a white rectangle over the whole canvas, but a quicker way to force a refresh is to resize the canvas width with canvas.width = canvas.width.

Oscillating with sine waves

Now we want the wave to move from one state to another smoothly, rather than just jumping around randomly. A sine function provides a nice smooth curve, and javascript's built-in math library has Math.sin().

We use i as a counter to progress through the animation. As the wave animates, i will get bigger and bigger and eventually overflow. Fortunately, most javascript implementations implement integers as doubles, so we should be safe for many millions of years. (maybe IE6 will be gone by that point)

A sine function oscillates between -1 and 1, so we need to add 1 and divide by 2 to shift it so that it oscillates between 0 and 1. I had originally tried taking the absolute value, but that broke the smooth curve where x=0.

Finally, I add different values to each of our sine functions just so that they don't alloscillate equally.

Multiple Waves

To get multiple waves, we need four different colors. I chose 4 different color blues using the color picker.

Multiple Waves

Now instead of drawing our wave during each cycle, we're going to draw four waves during each cycle. We iterate through each color in our waves array and set the fill color before drawing.

Also note that instead of using i directly in our animation, we're using the offset variable. Using i, each wave would oscillate at the exact same rate and the bottom 3 wouldn't be visible. I played around with the offset until I got something reasonable but it's certainly possible to use some basic trigonometry to calculate the offsets as well.

Tweaks and Speedup

Lastly, I just added a little bit more variance in the waves and moved them down a bit. You can see the final result in a new window. There are plenty more visual improvements we could make, so I encourage you to copy this html and make something with it. The tutorial source is on GitHub.

Since this is the first tutorial I've written, I'd appreciate any feedback. If you're interested in writing a tutorial in this format, I'm working on a tool that will generate the pretty code and diffs and slider from a github repository. Start off a single-file project, make each tutorial step a commit, and it will automatically pull out everything into a tutorial template. It's not quite releasable yet, but I'll be putting it up on GitHub soon.

Also, you should follow me on twitter.

« Back Next »

Preview

Open preview in new window

Diffs

+<html>
+  <head>
+  </head>
+
+  <body>
+    <h1>Waves</h1>
+  </body>
+</html>

  <body>
     <h1>Waves</h1>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type='text/javascript'>
+      var canvas = document.getElementById('canvas');
+      var ctx = canvas.getContext('2d');
+
+      function draw() {
+        // draw here
+      }
+
+      draw();
+    </script>
   </body>
 </html>

  <head>
+
+    <style>
+      body {
+        margin: 0;
+      }
+
+      #canvas {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+      }
+    </style>
+
   </head>
 
   <body>

 <html>
   <head>
-
-    <script type='text/javascript'>
-      var canvas = document.getElementById('canvas');
-      var ctx = canvas.getContext('2d');
-
-      function draw() {
-        // draw here
-      }
-
-      draw();
-    </script>
-
     <style>
       body {
         margin: 0;
@@ -28,6 +16,29 @@
 
   <body>
     <h1>Waves</h1>
+
     <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type='text/javascript'>
+      var canvas = document.getElementById('canvas');
+      var ctx = canvas.getContext('2d');
+
+      var width = window.innerWidth; 
+      var height = window.innerHeight;
+
+      function draw() {
+        ctx.fillStyle = ("#000000");
+
+        ctx.beginPath();
+        ctx.moveTo(0, 100);
+        ctx.lineTo(width, 100);
+        ctx.lineTo(width, height);
+        ctx.lineTo(0, height);
+        ctx.lineTo(0, 100);
+
+        ctx.closePath();
+        ctx.fill();
+      }
+      draw();
+    </script>
   </body>
 </html>

       function draw() {
         ctx.fillStyle = ("#000000");
 
-        ctx.moveTo(0, 100);
-        ctx.lineTo(width, 100);
+        var randomLeft = 300
+        var randomRight = 100
+
+        ctx.moveTo(0, randomLeft);
+        ctx.lineTo(width, randomRight);
         ctx.lineTo(width, height);
         ctx.lineTo(0, height);
-        ctx.lineTo(0, 100);
+        ctx.lineTo(0, randomLeft);
 
         ctx.closePath();
         ctx.fill();

       var canvas = document.getElementById('canvas');
       var ctx = canvas.getContext('2d');
 
-      var width = window.innerWidth; 
-      var height = window.innerHeight;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
 
       function draw() {
         ctx.fillStyle = ("#000000");
 
-        var randomLeft = 300
-        var randomRight = 100
+        var randomLeft = 300;
+        var randomRight = 100;
+        var randomConstraint = 500;
 
         ctx.moveTo(0, randomLeft);
-        ctx.lineTo(width, randomRight);
-        ctx.lineTo(width, height);
-        ctx.lineTo(0, height);
+        // ctx.lineTo(canvas.width, randomRight);
+        ctx.quadraticCurveTo(canvas.width / 2, randomConstraint, canvas.width, randomRight);
+        ctx.lineTo(canvas.width , canvas.height);
+        ctx.lineTo(0, canvas.height);
         ctx.lineTo(0, randomLeft);
 
         ctx.closePath();

       canvas.height = window.innerHeight;
 
       function draw() {
-        ctx.fillStyle = ("#000000");
+        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");
 
         var randomLeft = 300;
         var randomRight = 100;

         var randomLeft = 300;
         var randomRight = 100;
-        var randomConstraint = 500;
+        var randomLeftConstraint = 500;
+        var randomRightConstraint = 50;
 
         ctx.moveTo(0, randomLeft);
         // ctx.lineTo(canvas.width, randomRight);
-        ctx.quadraticCurveTo(canvas.width / 2, randomConstraint, canvas.width, randomRight);
+        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
         ctx.lineTo(canvas.width , canvas.height);
         ctx.lineTo(0, canvas.height);
         ctx.lineTo(0, randomLeft);

       function draw() {
         ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");
 
-        var randomLeft = 300;
-        var randomRight = 100;
-        var randomLeftConstraint = 500;
-        var randomRightConstraint = 50;
+        var randomLeft = Math.floor(Math.random() * 500);
+        var randomRight = Math.floor(Math.random() * 500);
+        var randomLeftConstraint = Math.floor(Math.random() * 500);
+        var randomRightConstraint = Math.floor(Math.random() * 500);
 
         ctx.moveTo(0, randomLeft);
         // ctx.lineTo(canvas.width, randomRight);

         ctx.closePath();
         ctx.fill();
       }
-      draw();
+      setInterval("draw()", 200);
     </script>
   </body>

--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
       canvas.height = window.innerHeight;
 
       function draw() {
+        canvas.width = canvas.width;
         ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");
 
         var randomLeft = Math.floor(Math.random() * 500);

       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
 
+      var i = 0;
+
       function draw() {
         canvas.width = canvas.width;
         ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");
 
-        var randomLeft = Math.floor(Math.random() * 500);
-        var randomRight = Math.floor(Math.random() * 500);
-        var randomLeftConstraint = Math.floor(Math.random() * 500);
-        var randomRightConstraint = Math.floor(Math.random() * 500);
+        var randomLeft = Math.abs(Math.sin(i/100)) * 500;
+        var randomRight = Math.abs(Math.sin((i/100) + 10)) * 500;
+        var randomLeftConstraint = Math.abs(Math.sin((i/100)+2)) * 500;
+        var randomRightConstraint = Math.abs(Math.sin((i/100)+1)) * 500;
 
         ctx.beginPath();
         ctx.moveTo(0, randomLeft);
@@ -45,8 +47,10 @@
 
         ctx.closePath();
         ctx.fill();
+
+        i++;
       }
       setInterval("draw()", 200);
     </script>

       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
 
+      var waves = ["rgba(157, 187, 210, 0.3)",
+                   "rgba(171, 216, 201, 0.3)",
+                   "rgba(135, 199, 215, 0.3)",
+                   "rgba(223, 233, 235, 0.3)"]
+
       var i = 0;
 
       function draw() {

       function draw() {
         canvas.width = canvas.width;
-        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");
 
-        var randomLeft = Math.abs(Math.pow( Math.sin(i/100), 2 )) * 200;
-        var randomRight = Math.abs(Math.pow( Math.sin((i/100) + 10), 2 )) * 200;
-        var randomLeftConstraint = Math.abs(Math.pow( Math.sin((i/100)+2), 2 )) * 200;
-        var randomRightConstraint = Math.abs(Math.pow( Math.sin((i/100)+1), 2)) * 200;
+        for(var j = waves.length - 1; j >= 0; j--) {
+          var offset = i + j * Math.PI * 12;
+          ctx.fillStyle = (waves[j]);
 
-        ctx.beginPath();
-        ctx.moveTo(0, randomLeft);
+          var randomLeft = Math.abs(Math.pow( Math.sin(offset/100), 2 )) * 200;
+          var randomRight = Math.abs(Math.pow( Math.sin((offset/100) + 10), 2 )) * 200;
+          var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/100)+2), 2 )) * 300;
+          var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/100)+1), 2)) * 300;
 
-        // ctx.lineTo(canvas.width, randomRight);
-        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
-        ctx.lineTo(canvas.width , canvas.height);
-        ctx.lineTo(0, canvas.height);
-        ctx.lineTo(0, randomLeft);
+          ctx.beginPath();
+          ctx.moveTo(0, randomLeft);
 
-        ctx.closePath();
-        ctx.fill();
+          // ctx.lineTo(canvas.width, randomRight);
+          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
+          ctx.lineTo(canvas.width , canvas.height);
+          ctx.lineTo(0, canvas.height);
+          ctx.lineTo(0, randomLeft);
+
+          ctx.closePath();
+          ctx.fill();
+        }
 
         i++;
       }

           var randomLeft = Math.abs(Math.pow( Math.sin(offset/100), 2 )) * 200;
           var randomRight = Math.abs(Math.pow( Math.sin((offset/100) + 10), 2 )) * 200;
-          var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/100)+2), 2 )) * 300;
-          var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/100)+1), 2)) * 300;
+          var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/90)+2), 2 )) * 300;
+          var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/90)+1), 2)) * 300;
 
           ctx.beginPath();
-          ctx.moveTo(0, randomLeft);
+          ctx.moveTo(0, randomLeft + 10);
 
-          // ctx.lineTo(canvas.width, randomRight);
-          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
+          // ctx.lineTo(canvas.width, randomRight + 10);
+          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 10);
           ctx.lineTo(canvas.width , canvas.height);
           ctx.lineTo(0, canvas.height);
-          ctx.lineTo(0, randomLeft);
+          ctx.lineTo(0, randomLeft + 10);
 
           ctx.closePath();
           ctx.fill();

Source

<html>
  <head>
  </head>

  <body>
    <h1>Waves</h1>
  </body>
</html>

<html>
  <head>
  </head>

  <body>
    <h1>Waves</h1>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      function draw() {
        // draw here
      }

      draw();
    </script>

  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      function draw() {
        // draw here
      }

      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      var width = window.innerWidth; 
      var height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("#000000");

        ctx.beginPath();
        ctx.moveTo(0, 100);
        ctx.lineTo(width, 100);
        ctx.lineTo(width, height);
        ctx.lineTo(0, height);
        ctx.lineTo(0, 100);

        ctx.closePath();
        ctx.fill();
      }
      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      var width = window.innerWidth; 
      var height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("#000000");

        var randomLeft = 300
        var randomRight = 100

        ctx.moveTo(0, randomLeft);
        ctx.lineTo(width, randomRight);
        ctx.lineTo(width, height);
        ctx.lineTo(0, height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("#000000");

        var randomLeft = 300;
        var randomRight = 100;
        var randomConstraint = 500;

        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.quadraticCurveTo(canvas.width / 2, randomConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = 300;
        var randomRight = 100;
        var randomConstraint = 500;

        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.quadraticCurveTo(canvas.width / 2, randomConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = 300;
        var randomRight = 100;
        var randomLeftConstraint = 500;
        var randomRightConstraint = 50;

        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = Math.floor(Math.random() * 500);
        var randomRight = Math.floor(Math.random() * 500);
        var randomLeftConstraint = Math.floor(Math.random() * 500);
        var randomRightConstraint = Math.floor(Math.random() * 500);

        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      draw();
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function draw() {
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = Math.floor(Math.random() * 500);
        var randomRight = Math.floor(Math.random() * 500);
        var randomLeftConstraint = Math.floor(Math.random() * 500);
        var randomRightConstraint = Math.floor(Math.random() * 500);

        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      setInterval("draw()", 200);
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function draw() {
        canvas.width = canvas.width;
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = Math.floor(Math.random() * 500);
        var randomRight = Math.floor(Math.random() * 500);
        var randomLeftConstraint = Math.floor(Math.random() * 500);
        var randomRightConstraint = Math.floor(Math.random() * 500);

        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();
      }
      setInterval("draw()", 200);
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var i = 0;

      function draw() {
        canvas.width = canvas.width;
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = Math.abs(Math.sin(i/100)) * 500;
        var randomRight = Math.abs(Math.sin((i/100) + 10)) * 500;
        var randomLeftConstraint = Math.abs(Math.sin((i/100)+2)) * 500;
        var randomRightConstraint = Math.abs(Math.sin((i/100)+1)) * 500;

        ctx.beginPath();
        ctx.moveTo(0, randomLeft);
        // ctx.lineTo(canvas.width, randomRight);
        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();

        i++;
      }
      setInterval("draw()", 200);
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var waves = ["rgba(157, 187, 210, 0.3)",
                   "rgba(171, 216, 201, 0.3)",
                   "rgba(135, 199, 215, 0.3)",
                   "rgba(223, 233, 235, 0.3)"]

      var i = 0;

      function draw() {
        canvas.width = canvas.width;
        ctx.fillStyle = ("rgba(0, 0, 0, 0.4)");

        var randomLeft = Math.abs(Math.pow( Math.sin(i/100), 2 )) * 200;
        var randomRight = Math.abs(Math.pow( Math.sin((i/100) + 10), 2 )) * 200;
        var randomLeftConstraint = Math.abs(Math.pow( Math.sin((i/100)+2), 2 )) * 200;
        var randomRightConstraint = Math.abs(Math.pow( Math.sin((i/100)+1), 2)) * 200;

        ctx.beginPath();
        ctx.moveTo(0, randomLeft);

        // ctx.lineTo(canvas.width, randomRight);
        ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
        ctx.lineTo(canvas.width , canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.lineTo(0, randomLeft);

        ctx.closePath();
        ctx.fill();

        i++;
      }
      setInterval("draw()", 20);
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var waves = ["rgba(157, 187, 210, 0.3)",
                   "rgba(171, 216, 201, 0.3)",
                   "rgba(135, 199, 215, 0.3)",
                   "rgba(223, 233, 235, 0.3)"]

      var i = 0;

      function draw() {
        canvas.width = canvas.width;

        for(var j = waves.length - 1; j >= 0; j--) {
          var offset = i + j * Math.PI * 12;
          ctx.fillStyle = (waves[j]);

          var randomLeft = Math.abs(Math.pow( Math.sin(offset/100), 2 )) * 200;
          var randomRight = Math.abs(Math.pow( Math.sin((offset/100) + 10), 2 )) * 200;
          var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/100)+2), 2 )) * 300;
          var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/100)+1), 2)) * 300;

          ctx.beginPath();
          ctx.moveTo(0, randomLeft);

          // ctx.lineTo(canvas.width, randomRight);
          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
          ctx.lineTo(canvas.width , canvas.height);
          ctx.lineTo(0, canvas.height);
          ctx.lineTo(0, randomLeft);

          ctx.closePath();
          ctx.fill();
        }

        i++;
      }
      setInterval("draw()", 20);
    </script>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var waves = ["rgba(157, 187, 210, 0.3)",
                   "rgba(171, 216, 201, 0.3)",
                   "rgba(135, 199, 215, 0.3)",
                   "rgba(223, 233, 235, 0.3)"]

      var i = 0;

      function draw() {
        canvas.width = canvas.width;

        for(var j = waves.length - 1; j >= 0; j--) {
          var offset = i + j * Math.PI * 12;
          ctx.fillStyle = (waves[j]);

          var randomLeft = Math.abs(Math.pow( Math.sin(offset/100), 2 )) * 200;
          var randomRight = Math.abs(Math.pow( Math.sin((offset/100) + 10), 2 )) * 200;
          var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/90)+2), 2 )) * 300;
          var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/90)+1), 2)) * 300;

          ctx.beginPath();
          ctx.moveTo(0, randomLeft + 10);

          // ctx.lineTo(canvas.width, randomRight + 10);
          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 10);
          ctx.lineTo(canvas.width , canvas.height);
          ctx.lineTo(0, canvas.height);
          ctx.lineTo(0, randomLeft + 10);

          ctx.closePath();
          ctx.fill();
        }

        i++;
      }
      setInterval("draw()", 20);
    </script>
  </body>
</html>