p5.j​​s中带有矩形的网格中的意外边框图案

Question

我试图在p5js中生成一个像正方形的格子图案，以覆盖尽可能多的浏览器窗口。我在实例模式下使用p5js，因为我将其与react一起使用，并且在Win10中使用chrome。 这是我的代码：-

var size = 15;
var height = window.innerHeight;
var width = window.innerWidth;

Sketch = (p) => {
        p.setup = () => {
            p.createCanvas(width,height)
            p.frameRate(60);
            p.noLoop();
        } 

        p.draw = () => {
            p.background(250);
            p.stroke(0);
            p.noFill();
            for(let i =0;i*size +size <width;i++) {
                for(let j=0;j*size +size<height;j++) {
                    p.rect(i*size,j*size,size,size);
                }
            }
        }

        p.mouseDragged = (e) => {
            p.stroke(0);
            let x = Math.floor(e.clientY/size);
            let y = Math.floor(e.clientX/size);
            p.fill(220);
            p.rect(y*size,x*size,size,size);
                
        }
}

我调用p.noLoop（），所以它不会每次刷新，并且我还有一个按钮可以调用p.redraw（）将所有内容更改为默认值。这是我得到的网格和行为：

网格的边界大小不同，首先减小，然后增大，然后减小，依此类推。此外，我拖曳鼠标的区域还有更多怪异的边框（当我在其他地方单击时，此问题得到解决，这是GPU别名渲染问题吗？）。如何在整个屏幕上创建具有相同边框的网格？

编辑：即使我渲染单个框，也有问题。左边界和上边界很好。但是，右边框和下边框都有一个额外的灰色边框像素，这似乎是问题所在。我该如何解决？

另外，p5js中strokeWeight和rect如何工作？如果我执行strokeWeight（10）和rect（3,2,50,50），是否会创建一个50 x 50的矩形，周围有10个像素边框，或者边框大小都包含在边框中？