Ошибка Javascript: Uncaught TypeError: Невозможно прочесть свойство 0 из undefined

Question

Когда я запускаю это, он говорит:

Uncaught TypeError: Невозможно прочитать свойство «0» неопределенного значения.

Понятия не имею, как это исправить.

Canvas: <canvas id="c" style="background-color: black;">

var c = document.getElementById('c');
var ctx = c.getContext('2d');

c.width = window.innerWidth;
c.height = window.innerHeight;

var grid = [];

for (var j = 0; j < c.height; j++) {
  grid.push([]);
  for (var i = 0; i < c.width; i++) {
    grid[j].push(0);
  }
}

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);

  for (var j = 0; j < grid.length; j++) {
    for (var i = 0; i < grid[0].length; i++) {
      ctx.fillStyle = (grid[i][j] == 0) ? 'red' : 'blue';
      ctx.fillRect(i, j, 1, 1);
    }
  }
}

//setInterval(draw, 10);
draw();

<canvas id="c" style="background-color: black;">

Answer 1

Вы должны добавить grid.length вместо grid[0].length во внутреннем для l oop.

var c = document.getElementById('c');
var ctx = c.getContext('2d');

c.width = window.innerWidth;
c.height = window.innerHeight;

var grid = [];

for (var j = 0; j < c.height; j++) {
  grid.push([]);
  for (var i = 0; i < c.width; i++) {
    grid[j].push(0);
  }
}

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);

  for (var j = 0; j < grid.length; j++) {
    for (var i = 0; i < grid.length; i++) {
      ctx.fillStyle = (grid[i][j] == 0) ? 'red' : 'blue';
      ctx.fillRect(i, j, 1, 1);
    }
  }
}

//setInterval(draw, 10);
draw();

<canvas id="c" style="background-color: black;">