title: Using HTML over canvas, nothing has worked
body: <p>I'm trying to get my OVERLAY tag to appear on top of my canvas javascript. I've gone through all the questions on here but nothing has worked!</p>
  
  <p>Please help! Code:</p>
  
  <p>page.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;  
      &lt;head&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Document&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='container'&gt;
              &lt;canvas id='canvas'&gt;&lt;/canvas&gt;
              &lt;script src="test-script.js"&gt;&lt;/script&gt;
              &lt;div id='overlay'&gt;OVERLAY
                  &lt;br&gt;&lt;/br&gt;
                  OVERLAY
                  &lt;br&gt;&lt;/br&gt;
                  OVERLAY
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>style.css </p>
  
  <pre><code>#canvas {position: fixed; z-index: -1;}
  #overlay {margin-top: -50px; z-index:0; position: relative;}
  </code></pre>
  
  <p>test-script.js</p>
  
  <pre><code>var ns = ns || {};
  
  (function draw() {
      var c;
      var ctx;
      var trails = [];
  
      document.body.onload = function() {
          c = document.getElementById( 'canvas' );
  
          c.width     = 2000;
          c.height    = 2000;
  
          document.body.appendChild( c );
          ctx = c.getContext( "2d" );
  
          trails.push( new ns.trailer( [990000, 990000, 990000, 600000, 600000 ]));
          // trails.push( new ns.trailer( [  600000,600000,600000,600000,600000,600000,600000  ] ));
          trails.push( new ns.trailer( [  8000000, 8000000, 8000000, 990000, 990000 ] ));
  
          document.onmousedown = reset;
          reset();
          setInterval( compute, 0 );
  
      }
  
      function reset() {
          ctx.fillStyle = "white";
          ctx.fillRect( 0,0,c.width,c.height );
          for( var i =0; i &lt; trails.length; i++ ) {
              trails[ i ].reset();
          }
      }
  
      function compute() {
          for( var i =0; i &lt; trails.length; i++ ) {
              trails[ i ].compute( ctx );
          }
      }
  })();
  
  ns.trailer = function( colors ) {
      this.points = [];
      this.stroke = new ns.stroke( null, 100, 10, colors[ 0 ] );
  
      this.colorIterator = 10;
      this.colors = colors;
  }
  
  ns.trailer.prototype = {
      reset : function() {
          this.points = [];
  
          this.width = document.body.offsetWidth;
          this.height = document.body.offsetHeight;
  
          this.radius = Math.max( this.width, this.height ); 
          this.center = new ns.point( this.width / 2, this.height / 2 );
  
          this.a0 = Math.random() * Math.PI * 2;
          this.a1 = Math.random() * Math.PI * 2;
          this.a2 = Math.random() * Math.PI * 2;
  
          var mul = 1 + Math.random() * 2;
  
         if( Math.random() &gt; .5 ) mul *= 5;
         else mul /= 2;
  
         this.s0 = ( Math.random() - .5 ) * mul / 180 * Math.PI;
         this.s1 = ( Math.random() - .5 ) * mul / 180 * Math.PI;
         this.s2 = ( Math.random() - .5 ) * mul / 180 * Math.PI;
      },
      compute : function( ctx ) {
          with( this ) {
              a0 += s0;
              a1 += s1;
              a2 += s2;
  
              var c = Math.cos( a0 ) * Math.cos( a1 ) * Math.cos( a2 );
              var s = Math.sin( a0 ) * Math.sin( a1 ) * Math.sin( a2 );
              points.push( new ns.point( center.x + c * radius,
                                   center.y + s * radius  )  );
  
              if( points.length &gt; 10 ) points.shift();
  
              stroke.anchors = points;
              stroke.draw( ctx );
  
              var t = .5 + (Math.sin( new Date().getTime() * .001 ) * .5 );
              stroke.color = colors[ Math.floor( t * colors.length ) ];
              stroke.width = 25 + ( 1 - t )  * 50;
              //stroke.strokeCount = 5 + t * 5;
              stroke.strokeCount = 5;
          }
      }
  }
  
  ns.point = function( x,y ) {
      this.x = x;
      this.y = y;
  }
  
  ns.point.prototype = {
      add : function( p ) {
          return new ns.point( this.x + p.x, this.y + p.y );
      }.
      sub : function( p ) {
          return new ns.point( this.x - p.x, this.y - p.y );
      },
      negate : function() {
          this.x *= -1;
          this.y *= -1;
          return this;
      },
      clone : function() {
          return new ns.point( this.x, this.y );
      },
      length : function() {
          return Math.sqrt( this.x * this.x + this.y * this.y );
      },
      normalize : function ( scale ) {
          scale = scale || 1;
          var l = this.length();
          this.x /= l;
          this.x *= scale;
          this.y /= l;
          this.y *= scale;
          return this;
      }
  }
  
  ns.stroke = function( anchors, width, strokeCount, color ) {
      this.anchors = anchors;
      this.width = width;
      this.strokeCount = strokeCount;
      this.color = color;
  }
  
  ns.stroke.prototype = {
      normal : function( p0, p1 ){    
          return new ns.point( -( p1.y - p0.y ), (    p1.x   - p0.x ) );   
      },
      draw : function( ctx ) {
          if( this.anchors == undefined ) return;
  
          var half = this.height * .5;
          var p, c, n, pnorm, pln, prn, cnorm, cln, crn;
  
          with( this ) {
              for( var j = 0; j &lt; strokeCount; j++ ) {
                  half = width * .5 * Math.random();
                  var col = ns.variation( color, 35 );
                  ctx.lineWidth = .1 + Math.random() * 2;
  
                  for( var i = 0; i &lt; anchors.length - 2; i++ ) {
                      p = anchors[ i ];
                      c = anchors[ i+1 ];
                      n = anchors[ i+2 ];
  
                      pnorm = normal( p, c );
                      cnorm = normal( c, n );
  
                      half += ( Math.random() - .5 );
                      pnorm.normalize( half );
                      pln = p.add( pnorm );
  
                      pnorm.normalize( -half );
                      prn = p.add( pnorm );
  
                      half += ( Math.random() - .5 );
                      cnorm.normalize( half );
                      cln = c.add( cnorm );
  
                      cnorm.normalize( -half );
                      crn = c.add( cnorm );
  
                      ctx.beginPath();
                      ctx.strokeStyle = col;
                      ctx.moveTo( prn.x, prn.y );
                      ctx.lineTo( crn.x, crn.y );
                      ctx.stroke();
                      ctx.closePath();
  
                      ctx.beginPath();
                      ctx.strokeStyle = col;
                      ctx.moveTo( pln.x, pln.y );
                      ctx.lineTo( cln.x, cln.y );
                      ctx.stroke();
                      ctx.closePath();
                  }
              }
          }
      }
  }
  
  ns.variation = function( color, amount ) {
      amount = amount || 25;
      var r = color &gt;&gt; 16 &amp; 0xFF;
      var g = color &gt;&gt; 8 &amp; 0xFF;
      var b = color &amp; 0xFF;
  
      r += Math.floor( ( Math.random() - .5 ) * amount );
      g += Math.floor( ( Math.random() - .5 ) * amount );
      b += Math.floor( ( Math.random() - .5 ) * amount );
  
      r = r &gt; 0xFF ? 0xFF : r &lt; 0 ? 0 : r;
      g = g &gt; 0xFF ? 0xFF : g &lt; 0 ? 0 : g;
      b = b &gt; 0xFF ? 0xFF : b &lt; 0 ? 0 : b;
  
      return "rgba("+r+','+g+','+b+','+Math.random()+');';
  }
  </code></pre>
  
  <p>**I've added my Javascript code</p>