Nested for loops froze the browser

Question

I am trying to calculate Moore neighborhood.

If I set the loop to execute 10 times each (10x10 dimension), it works but when I change them to 20 times each (20x20 dimension), it froze the browser.

Why did it freeze?

var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");

var step = 20;
var n = 20,
  m = 20;
var population = [];
var MIN_X = 0;
var MIN_Y = 0;
var MAX_X = 19;
var MAX_Y = 19;

for (var i = 0; i < m; i++) {
  population[i] = [];
  for (var j = 0; j < n; j++) {
    population[i][j] = 0;
  }
}

for (var x = 0; x < step; x++) {
  context.beginPath();
  context.moveTo(x * step, 0);
  context.lineTo(x * step, step * step);
  context.closePath();
}

for (var y = 0; y < step; y++) {
  context.beginPath();
  context.moveTo(0, y * step);
  context.lineTo(step * step, y * step);
  context.closePath();
}

function redrawGrid() {
  for (var r = 0; r < step; r++) {
    for (var z = 0; z < step; z++) {
      var temp = population[r][z]
      if (temp == 0) {
        context.beginPath();
        context.rect(r * step, z * step, step, step);
        context.fillStyle = 'white';
        context.fill();
        context.closePath();
      };
      if (temp == 1) {
        context.beginPath();
        context.rect(r * step, z * step, step, step);
        context.fillStyle = 'red';
        context.fill();
        context.closePath();
      };
      if (temp == 2) {
        context.beginPath();
        context.rect(r * step, z * step, step, step);
        context.fillStyle = 'black';
        context.fill();
        context.closePath();
      };

    }
  }
}
for (var r = 0; r < step; r++) {
  for (var z = 0; z < step; z++) {
    var temp = randomIntFromInterval(0, 2);

    population[r][z] = temp;

    if (temp == 0) {
      context.beginPath();
      context.rect(r * step, z * step, step, step);
      context.fillStyle = 'white';
      context.fill();
      context.closePath();
    };
    if (temp == 1) {
      context.beginPath();
      context.rect(r * step, z * step, step, step);
      context.fillStyle = 'red';
      context.fill();
      context.closePath();
    };
    if (temp == 2) {
      context.beginPath();
      context.rect(r * step, z * step, step, step);
      context.fillStyle = 'black';
      context.fill();
      context.closePath();
    };

  }
}
var startPosX;
var startPosY;
var endPosX;
var endPosY;
var ownColor;
var otherColor;

function moor(i, j) {
  ownColor = 0;
  otherColor = 0;

  startPosX = (i - 1 < MIN_X) ? i : i - 1;
  startPosY = (j - 1 < MIN_Y) ? j : j - 1;
  endPosX = (i + 1 > MAX_X) ? i : i + 1;
  endPosY = (j + 1 > MAX_Y) ? j : j + 1;

  for (var rowNum = startPosX; rowNum <= endPosX; rowNum++) {
    for (var colNum = startPosY; colNum <= endPosY; colNum++) {
      if (rowNum == i && colNum == j) {} else {
        if (population[rowNum][colNum] == 1)
          ownColor++;
        if (population[rowNum][colNum] == 2)
          otherColor++;
      }
    }
  }

  if (ownColor == 0) {
    return 0;
  } else
    return otherColor / ownColor;
}



function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

context.strokeStyle = "#ddd";
context.stroke();
//population[0][0] = 0;
//setTimeout("redrawGrid()", 500);

var rand1;
var rand2;
var temp;
var i;
var j;

for (i = 0; i < 10; i++) {
  for (j = 0; j < 10; j++) {

    if (moor(i, j) > moor(i + 1, j)) {

      temp = population[i][j];
      rand1 = randomIntFromInterval(0, 19);
      rand2 = randomIntFromInterval(0, 19);
      population[i][j] = population[rand1, rand2];
      population[rand1][rand2] = temp;

    }
  }
}

<canvas id="c"></canvas>