title: How to draw a grid in canvas with alpha channel based on the width of the grid line?
body: <p>I'm a little stuck on this one; basically what I want to happen is that the grid is drawn at full opacity first, decreasing to 0.15 opacity when the grid line is either the width or height of the canvas. I have the <em>inverse</em> working, but I'm not sure how to convert that into what I need. Here is the code to recreate the problem:</p>
  
  <pre><code>var bg = id('bg');
  var bgCtx = bg.getContext('2d');
  
  /*    Menu Screen
      ------------------------------------- */
  
  var game = 
  {
      w:800,
      h:500
  };
  
  var menu =
  {
      tick: 0,
      gridX: 0,
      gridY: 0,
      active:true,
      lines:
      [
  
      ]
  };
  
  function GridLine(x, y, direction)
  {
      this.x = x;
      this.y = y;
      this.dimension = 0;
      this.direction = direction;
  }
  
  GridLine.prototype.draw = function()
  {
      bgCtx.strokeStyle = 'hsla(192, 100%, 70%, ' + (this.dimension/game.h) + ')';
      bgCtx.lineWidth = 1;
      if (this.direction == 'vertical')
      {
          if (this.dimension &lt; game.h)
          {
              this.dimension+=20;
          }
          bgCtx.beginPath();
          bgCtx.moveTo(0.5 + this.x, 0);
          bgCtx.lineTo(0.5 + this.x, this.dimension);
          bgCtx.stroke();
          bgCtx.closePath();
      }
      else if (this.direction == 'horizontal')
      {
          if (this.dimension &lt; game.w)
          {
              this.dimension+=20;
          }
          bgCtx.beginPath();
          bgCtx.moveTo(0, 0.5 + this.y);
          bgCtx.lineTo(this.dimension, 0.5 + this.y);
          bgCtx.stroke();
          bgCtx.closePath();
      }
  }
  
  function updateMenu()
  {
      if (menu.active)
      {
          bgCtx.clearRect(0,0,bg.width,bg.height);
          bgCtx.fillStyle = "black";
          bgCtx.fillRect(0, 0, bg.width, bg.height);
          menu.tick++;
          if (menu.tick % 2 == 0 &amp;&amp; menu.gridX &lt; game.w)
          {
              menu.gridX += 50;
              menu.gridY += 50;
              menu.lines[menu.lines.length] = new GridLine(menu.gridX, 0, 'vertical');
              menu.lines[menu.lines.length] = new GridLine(0, menu.gridY, 'horizontal');
          }
          for (var h = 0; h &lt; menu.lines.length; h++)
          {
              menu.lines[h].draw();
          }
          requestAnimationFrame(updateMenu);
      }
      else
      {
          cancelAnimationFrame(updateMenu);
      }
  }
  
  window.addEventListener('load', function()
  {
      updateMenu();
  }, false);
  
  /*    Helper functions
      ------------------------------------- */
  
  function id(e)
  {
      return document.getElementById(e);
  }
  
  (function()
  {
      // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for(var x = 0; x &lt; vendors.length &amp;&amp; !window.requestAnimationFrame; ++x)
      {
          window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
          window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
      }
  
      if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
      {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = window.setTimeout(function()
          {
              callback(currTime + timeToCall);
          }, timeToCall);
          lastTime = currTime + timeToCall;
          return id;
      };
  
      if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
      {
          clearTimeout(id);
      };
  }());
  </code></pre>
  
  <p>The problem is in the <code>GridLine.prototype.draw function</code>. Any advice you can give would be fantastic.</p>