Chess Layout

HTML

<body>
 <div id='gameSynopsis'>
 </div>
 <div id="gameArea" lang='en'>
  	<div id="output">
      <span id="outputMessage">Some text here</span>
      <span id="aiThinkingIndicator" class="loading hide"></span>
    </div>
  	<div id="fileNotation" class="boardLabel">
      ABCDEFGH
  	</div>
  	<div id="rankNotation" class="boardLabel">
      87654321
  	</div>
  	<div id="boardAndInfo">
  		<div id="board">
  			<canvas id="chessboard" width="600" height="600"></canvas>
  			<canvas id="highlight" width="600" height="600"></canvas>
  			<canvas id="chesspieceCanvas" width="600" height="600">
  				<p id='canvasSupportMsg'></p>
  			</canvas>
  		</div>
  		<fieldset id="gameInfo">
  			<legend id='gameInfoTitle'>Stuff</legend>
  		</fieldset>
  	</div>
  </div>
</body>

CSS

#gameArea {
    width: 650px;
    font-size: 16px;
}

#output {
    text-align: center;
}
  #outputMessage {
      display: inline-block;
      font-size: 2.5em;
      font-weight: bold;
  }

#boardAndInfo {
    overflow: visible;
    position: relative;
    width: 1000px;
}

#board {
display: inline-block;
border: 0.12em solid black;
height: inherit;
position: relative;
width: 600px;
line-height: 0;
overflow: hidden;
}

#chessboard {
    position: absolute;
    z-index: 0;
}

#highlight {
    position: absolute;
    z-index: 1;
}

#gameInfo {
    display: inline-block;
    height: 585px;
    width: 190px;
    vertical-align: top;
    position: relative;
}

#fileNotation {
    color: gray;
    font-size: 2.0em;
    margin-left: 50px;
    letter-spacing: 54px;
}

#chesspieceCanvas {
    font-size: 70px;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    z-index: 2;
}

#rankNotation {
    color: gray;
    float: left;
    font-size: 2.0em;
    line-height: 235%;
    position: relative;
    width: 1.5ch;
    word-wrap: break-word;
}

JavaScript

chessboard = document.getElementById('chessboard');
ctxPiece = document.getElementById('chesspieceCanvas').getContext('2d');
ctxHighlight = document.getElementById('highlight').getContext('2d');

drawBoard(chessboard, chessboard.getContext('2d'));

function drawBoard(canvas, ctx) {
	var rows = 8;
	TILE_SIZE = canvas.height / rows;
    var white = true;
    var TILE_COLOR1 = "rgb(160,82,45)";
		var TILE_COLOR2 = "rgb(245,222,179)";
    for (var row = 0; row < rows; row++) {
        for (var col = 0; col < rows; col++) {
            if (!white) {
                ctx.fillStyle = TILE_COLOR1;
                ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                white = true;
            } else {
                ctx.fillStyle = TILE_COLOR2; 
                ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                white = false;
            }
        }
        white = !white;
    }
}