Why Conway's Game of Life? Well, Conway's Game of Life is a very simple cellular automaton (for a more in-depth overview of the game, check out the article at Wikipedia for Conway's Game of Life) - the problem space is small enough to allow me to only focus on the HTML5 canvas tag while still including sufficient elements to make for both an interesting and valid learning experience.
The actual algorithm used to generate each successive generation is (perhaps) surprisingly simple: the Life patterns are represented as two-dimensional arrays. Two arrays are used, the first one to hold the current generation and the second one in which the next generation is calculated. Obviously, a zero will be used to represent dead cells and a one will represent live cells.
Each cell will be iterated over - an inner loop will be used to count the number of live neighbours to decide if the corresponding cell will 'live or die' in the next generation. Once all cells of the current generation have been iterated over and the corresponding successor array has been calculated, the successor array becomes the current (generation) array and is displayed, i.e., the two arrays swap roles.
With regards to the edges, in theory, the Life grid is infinite - this however, is not practical. Hence, I have adopted the strategy of wrapping the grid around, that is, both the top and bottom and left and right edges run over into one another - a toroidal array.
See Wikipedia (copied here for reference purposes): Game of Life's rules.
The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, live or dead.
Every cell interacts with its eight neighbors, which are the cells that are directly horizontally, vertically, or diagonally adjacent. At each step in time,
the following transitions occur: