var _canvas = document.getElementById('chessBoard');

const INDEX_MARGIN = (_canvas.width + _canvas.height) / 2 / 16;
const BOARD_WIDTH = _canvas.width - INDEX_MARGIN;
const BOARD_HEIGHT = _canvas.height - INDEX_MARGIN;
const BOX_WIDTH = BOARD_WIDTH / 8;
const BOX_HEIGHT = BOARD_HEIGHT / 8;

const INDEX_LETTERS = 'abcdefgh';

function drawChessBoard(canvas) {
  let ctx = canvas.getContext('2d');

  // Draw squares
  ctx.fillStyle = '#c0c0c0';
  for (let r = 0; r < 8; r++) {
    for (let c = 0; c < 8; c++) {
      if ((r + c) % 2) ctx.fillRect(c*BOX_WIDTH + INDEX_MARGIN,
                                    r*BOX_HEIGHT + INDEX_MARGIN,
                                    BOX_WIDTH, BOX_HEIGHT);
    }
  }

  // Draw letters
  ctx.fillStyle = 'black';
  let fontsize = INDEX_MARGIN / 2;
  ctx.font = `${fontsize}px Monospace`;
  for (let idx = 0; idx < 8; idx++) {
    ctx.fillText(INDEX_LETTERS[idx],
                 BOX_WIDTH*idx + BOX_WIDTH/2 + INDEX_MARGIN - fontsize / 4,
                 INDEX_MARGIN / 2);
    ctx.fillText((8-idx).toString(),
                 INDEX_MARGIN / 2 - fontsize / 4,
                 BOX_HEIGHT*idx + BOX_HEIGHT/2 + INDEX_MARGIN + fontsize / 4);
  }
}

drawChessBoard(_canvas);