Edit in JSFiddle

var $board;
var ctx;
var data = [];
var running = false;

var FORCE_ODD_X = false;
var FORCE_ODD_Y = false;
var FORCE_EVEN_X = true;
var FORCE_EVEN_Y = true;

//var CANVAS_SIZE = {x: 600, y: 400};
CANVAS_SIZE = {x: window.innerWidth, y: window.innerHeight};
var PIXEL_SIZE = {x: 10, y: 10};
var ARRAY_DIMENSIONS = {x: Math.floor(CANVAS_SIZE.x / PIXEL_SIZE.x),
                        y: Math.floor(CANVAS_SIZE.y / PIXEL_SIZE.y)};
if (FORCE_ODD_X)
  ARRAY_DIMENSIONS.x = Math.ceil(ARRAY_DIMENSIONS.x / 2) * 2 - 1;
if (FORCE_ODD_Y)
  ARRAY_DIMENSIONS.y = Math.ceil(ARRAY_DIMENSIONS.y / 2) * 2 - 1;
if (FORCE_EVEN_X)
  ARRAY_DIMENSIONS.x = Math.floor(ARRAY_DIMENSIONS.x / 2) * 2;
if (FORCE_EVEN_Y)
  ARRAY_DIMENSIONS.y = Math.floor(ARRAY_DIMENSIONS.y / 2) * 2;
                        
var BACKGROUND_COLOR = "#282828";
var PIXEL_STATES = {0:{color: "#282828", radius: 0},
                    1:{color: "#325115", radius: 1.5},
                    2:{color: "#40651a", radius: 2},
                    3:{color: "#598e25", radius: 3},
                    4:{color: "#7ac132", radius: 4}};
                    
function get2dArrayStr(data)
{
  var returnStr = "";
  for(var y = 0; y < data.length; y++)
  {
    for (var x = 0; x < data[y].length; x++)
    {
      returnStr += data[y][x];
    }
    returnStr += "\n";
  }
  return returnStr;
}

function updateBoardSize(w, h)
{
  var width = w || window.innerWidth;
  var height = h || window.innerHeight;
  $board.css("width", width + "px").css("height", height + "px");
  ctx.canvas.width = width;
  ctx.canvas.height = height;
}

function initializeDataArray()
{
  data = new Array(ARRAY_DIMENSIONS.y);
  for (var y = 0; y < data.length; y++)
  {
    data[y] = new Array(ARRAY_DIMENSIONS.x);
    for (var x = 0; x < data[y].length; x++)
      data[y][x] = 0;
      //data[y][x] = Math.floor(Math.random() * 5);
  } 
}

function drawPixel(x, y, val)
{
  ctx.beginPath();
  ctx.fillStyle = BACKGROUND_COLOR;
  ctx.fillRect(x * PIXEL_SIZE.x, y * PIXEL_SIZE.y, PIXEL_SIZE.x, PIXEL_SIZE.y);
  
  var pxl = PIXEL_STATES[val];
  ctx.fillStyle = pxl.color;
  ctx.arc(x * PIXEL_SIZE.x + PIXEL_SIZE.x/2,
          y * PIXEL_SIZE.y + PIXEL_SIZE.y/2,
          pxl.radius,
          0, 2* Math.PI, true);
  ctx.fill();
  ctx.closePath();
}

function drawBoard()
{
  var width = ARRAY_DIMENSIONS.x;
  var height = ARRAY_DIMENSIONS.y;
  
  for (var y = 0; y < height; y++)
    for (var x = 0; x < width; x++)
      drawPixel(x, y, data[y][x]);
}

function centerDataShape(arr)
{
  var height = arr.length;
  var width = arr[0].length;
  var xOffset = Math.floor((ARRAY_DIMENSIONS.x - width) / 2);
  var yOffset = Math.floor((ARRAY_DIMENSIONS.y - height) / 2);
  
  for (var y = 0; y < height; y++)
    for (var x = 0; x < width; x++)
      data[y + yOffset][x + xOffset] = arr[y][x];
}

function step()
{
  var newData = new Array(data.length);
  for (var y = 0; y < newData.length; y++)
  {
    newData[y] = new Array(data[y].length);
    for (var x = 0; x < newData[y].length; x++)
    {
      newData[y][x] = getNewCellValue(x, y);
    }
  }
  data = newData;
  
  drawBoard();
}

function getNewCellValue(xPos, yPos)
{
  var xmin = -1;
  var xmax = 1;
  var ymin = -1;
  var ymax = 1;
  
  var count = [0, 0, 0, 0, 0];
  
  if (xPos === 0)
    xmin = 0;
  if (xPos === data[0].length - 1)
    xmax = 0;
  if (yPos === 0)
    ymin = 0;
  if (yPos === data.length - 1)
    ymax = 0;
    
  for (var y = ymin; y <= ymax; y++)
  {
    for (var x = xmin; x <= xmax; x++)
    {
      if (x !== 0 || y !== 0)
      {
        count[data[yPos + y][xPos + x]] ++;
      }
    }
  }
  
  switch(data[yPos][xPos])
  {
    case 0:
      if ([3, 5, 7].indexOf(count[1]) !== -1)
        return 1;
      return 0;
    case 1:
      if ([3, 4, 5, 7].indexOf(count[1]) !== -1)
        return 1;
      return 2;
    case 2:
      return 3;
    case 3:
      return 4;
    // catches 4 too.
    default:
       return 0;
  }
}

function main()
{
  $board = $("#board");
  $("#nextStep").click(step);
  ctx = $board[0].getContext("2d");
  updateBoardSize(CANVAS_SIZE.x, CANVAS_SIZE.y);
  initializeDataArray();
  //*
  // wolfram alpha's loading screen
  centerDataShape([
    [0,0,0,0,0,0,1,1,1,0],
    [0,2,1,1,1,1,0,1,1,1],
    [1,1,1,0,1,1,1,1,2,0],
    [0,1,1,1,0,0,0,0,0,0]
  ]);
  //*/
  /*
  // splitting cells.
  centerDataShape([
    [0,0,1,1,0,0,0,1,1,0,0],
    [0,1,1,1,3,0,3,1,1,1,0],
    [4,1,3,4,2,0,2,4,3,1,4],
    [0,1,1,1,3,0,3,1,1,1,0],
    [0,0,1,1,0,0,0,1,1,0,0]
  ]);
  //*/
  drawBoard();
  
  var stepInt = setInterval(step, 100);
  running = true;
  
  $board.click(function(){
    if (!running)
    {
      stepInt = setInterval(step, 100);
      running = true;
    }
    else
    {
      clearInterval(stepInt);
      running = false;
    }
  });
}

$(document).ready(main);

<canvas id="board"></canvas>
<!--
<div id="controls">
  <button id="nextStep">Step</button>
</div>
-->

body
{
  overflow: hidden;
  margin: 0;
}

#board
{
  margin: 0;
  padding: 0;
  border: 0;
}