P5.JS Using a For loop to draw a centred set of rect's

Question

I'm trying to create a grid-like structure in a 3x2 fashion such as below, but I'm looking to centre it to the canvas, and have it scale with the page based on width and height. I'm looking to do so without using the scale(); or resizeCanvas; functions, and ideally doing it all similar to my current code, if possible. I've tried offsetting and messing with different math, but I just can't seem to get it. My current attempt appears like this; Attempt This is my code;

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

function draw() {
    background(100);
    rectMode(CENTER);

    let posX = width * 0.5;
    let posY = height * 0.5;
    let sizeX = width / 3;
    let sizeY = height / 3;

    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 2; j++) {
            fill('Red');
            rect(i * posX + 75, j * posY + 75, sizeX - 50, sizeY - 50);
        }
    }
}

Answer 1

So, when trying your code I actually got a different result than the image linked in your question, but it doesn't matter much.
Few things that don't change the result but are of better practice:
1 - If you never change the value of a variable during its scope, better declare is as const rather than let.
2 - Having rectMode() and fill() within draw() even though their parameters never change is useless and it would be better to use them within setup().
3 - I left background() inside draw() because it can be useful in the case you want to move the rectangles (or do any other drawing) without seeing the trails of all the drawings made so far.

Now let's come to the solutions I found:
First one, without calling rectMode() so that the rectangles are drawn by default from the corner and, as it is shown, there are less calculations to do:

function setup()
{
    createCanvas(500, 500);
    fill(255, 0, 0);
}

function draw()
{
    background(100);
    
    //Set the space between the edge of the canvas and your rectangles.
    const offsetX = width/10;
    const offsetY = width/10;
    
    /*
        Set the size of the rectangles so that they are X times smaller the width
        (or height) of the canvas already reduced of the space from the edges,
        where X is the number of rectangles that make up the rows (or columns).
    */
    const sizeX = (width-offsetX*2)/3;
    const sizeY = (height-offsetY*2)/2;

    for(let i = 0; i < 3; i++)
    {
        for(let j = 0; j < 2; j++)
        {
            rect(i*sizeX +offsetX, j*sizeY +offsetY, sizeX, sizeY);
        }
    }
}

Second one, setting rectMode(CENTER). It requires a bit more calculations and the call of rectMode(), but other than these it doesn't change much (comments are the same so I didn't repeat them):

function setup()
{
    createCanvas(500, 500);
    rectMode(CENTER);
    fill(255, 0, 0);
}

function draw()
{
    background(100);
    
    const offsetX = width/10;
    const offsetY = width/10;

    const sizeX = (width-offsetX*2)/3;
    const sizeY = (height-offsetY*2)/2;

    for(let i = 0; i < 3; i++)
    {
        for(let j = 0; j < 2; j++)
        {
            /*
                Add also half of the size so that the offset is from the edge of the
                rectangle and not from the center.
            */
            rect(i*sizeX+offsetX+sizeX/2, j*sizeY+offsetY+sizeY/2, sizeX, sizeY);
        }
    }
}

I hope this is what you asked for, if you have any question don't hesitate to ask.

EDIT

Added a change in color while drawing the rectangle (requested in the comments):

const colors = ['red', 'green', 'blue'];

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

function draw()
{
    background(100);
    
    const offsetX = width/10;
    const offsetY = width/10;

    const sizeX = (width-offsetX*2)/3;
    const sizeY = (height-offsetY*2)/3;

    for(let i = 0; i < 3; i++)
    {
        for(let j = 0; j < 2; j++)
        {
            fill(colors[i]);
            rect(i*sizeX +offsetX, j*sizeY +offsetY, sizeX, sizeY);
        }
    }
}

Let me know if this is what you wanted.