Q:

Trying to figure out 2D arrays by creating a 3x3 board and then visualizing it, however, I'm meeting some hurdles

What I'm trying to achieve is this - creating 2 dimensional array like this one:
var board = [
    [1, 0, 1],
    [0, 0, 0],
    [1, 1, 1]
];

and then create a 300px canvas in which  there will be 3x3 rectangles with 100px width and height each that will have different colors based on the array element value.
When the value is 1, the color should be red and when the value is 0 it should be blue.
I was able to create a 3x3 board in the canvas by using a nested loop, however, I am creating the board using a hard coded numbers instead of finding the length of the 2d array and creating rows and columns according to the length.
The problem is that I know how to get the length of a normal array only and not 2d. The other problem is that I can't figure out how to decide the color of the rectangle based on the array element value.
My code so far is:
 var board = [
    [1, 0, 1],
    [0, 0, 0],
    [1, 1, 1]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            var x = i*100;
            var y = j*100;
            fill(222);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

A:

You can use this code
    var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < board.length ; i++) {
        for (var j = 0; j < board[i].length; j++) {
            var x = j*100;
            var y = i*100;
            if(board[i][j] == 0)
                fill(211);
            else
                fill(10);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

