Drawing a rect on an p5.graphics doesnt seem to update the pixels

the following code should change the color of the circles when you draw with your mouse, but the pixels array doesnt change at all, while the p5 graphic changes on the image(g,0,0)

let g;

function setup() {
    createCanvas(500, 500);
    g = createGraphics(10, 10);
    g.background(0);
}

function getBr(x, y) {
    let d = g.pixelDensity();
    let a = [];
    for (let i = 0; i < d; i++) {
        for (let j = 0; j < d; j++) {
            // loop over
            index = 4 * ((y * d + j) * g.width * d + (x * d + i));
            a.push(g.pixels[index]);
            a.push(g.pixels[index + 1]);
            a.push(g.pixels[index + 2]);
        }
    }
    return (a[0] + a[1] + a[2]) / 3;
}

function draw() {
    background(100);
    noStroke();
    fill(255);
    let s = width/g.width;
    g.loadPixels();
    for (let y = 0; y < g.height; y++) {
        for (let x = 0; x < g.width; x++) {
            let b = getBr(x,y);
            fill(b);
            ellipse(x*s,y*s,s,s);
        }
    }
    if (mouseIsPressed) {
        g.noStroke();
        g.fill(255);
        g.rect(mouseX/s,mouseY/s,2,2);
    }
    image(g, 0, 0, 100, 100);
}

why not use the p5 get method

https://editor.p5js.org/kll/sketches/xndqGVdtW

but for me that is all very slow ( even you only use 10 * 10 pix ) here,
still it works.

I have indeed tried get() before and it worked but it’s really slow and i want to use grids with higher resolution than 10x10

understand, but can not see that here,
pls visit my p5js page again,
now key [t] allow to switch between your code ( we know something is wrong )
try:

        index = 4 * ((y * d + j) * g.width * d + (x * d + i));
	console.log("d "+d+" x "+x+" y "+y+" index "+index);
/*
d 2 x 9 y 9 index 1512 
d 2 x 9 y 9 index 1592 
d 2 x 9 y 9 index 1516 
d 2 x 9 y 9 index 1596

*/

and the working get version, anyhow see nearly same FPS.
as my hardware is too limited (Raspberry PI) i would like to know
what you see ( in both cases ).