title: How to center a dynamically sized canvas in a viewport?
body: <p>I've been struggling with this for some time and I'm hoping you guys can help. I have a dynamically sized canvas that draws a grid based on the canvas size that is refusing to center. I've tried a lot of the suggestions from this site, but they all seem to apply to fixed width canvases. This won't work for me.. </p>
  
  <p>Here is all of the code, so you can see everything I'm doing.. I'm using mootools to do the dynamic resize of the canvas and contents. If there's a way to resize without mootools that anyone knows of, that would be great too. </p>
  
  <p>Thanks!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
          &lt;LINK href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
          &lt;script type='text/javascript' src='https://my-youtube.googlecode.com/files/mootools-core-1.4.2-full-nocompat.js'&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src="chessboard.js"&gt;&lt;/script&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;canvas id="canvas"&gt;TEST&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  #header {
      margin-top: 0px;
      height: 75px;
      width: 100%;
      background: url(images/logo1.png) no-repeat top center;
  }
  
  #content {
      width: 100%;
      height: 100%-75px;
  }
  
  #footer {
  
  }
  
  body, html {
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      background-color: #a6a6a6;
      background-image: url(images/background_image3.jpg);
      background-repeat: repeat-x;
      height: 100%;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>window.addEvent('load', function() {
  (function() {
      var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');
  
  // resize the canvas to fill browser window dynamically
      window.addEventListener('resize', resizeCanvas, false);
  
      function resizeCanvas() {
          canvas.height = window.innerHeight-100;
          canvas.width = canvas.height;
  
          drawStuff();
      }
  
  resizeCanvas();
  
      function drawStuff() {
  
          var width = canvas.height/8;
          var baseX = 0.5, baseY = 0.5;
  
  
  // draws the 8 by 8 chessboard
          for (var i = 0; i &lt; 8; i++) {
              for (var j = 0; j &lt; 8; j++) {
                  var x = baseX + width * i, y = baseY + width * j;
                  context.strokeRect(x, y, width, width);
                  if ((i + j) % 2 != 0) {
                      context.fillStyle = '#BA1A1A';
                      context.fillRect(x, y, width, width);
                  }
                  if ((i + j) % 2 == 0) {
                      context.fillStyle = 'E6A3A3';
                      context.fillRect(x, y, width, width);
                  }
              }
          }
      }
  })();
  });
  </code></pre>