processing/p5.js — 2D grid is shrinking whenever I increase the number of cells

Question

I am drawing a 17×17 2D grid on canvas using rect(). But whenever I increase the numbers of cells (for example 20×20) the grid on canvas is shrinking. At first I thought that it was a floating point precision loss problem. However it seems that it is not the case. Does the density or pixels of screen has something to do with it? Because it happens differently on different sizes of screen.

Here is my code in draw():

let size = width / 17;
for (let x = 0; x < size; x++) {
    for (let y = 0; y < size; y++) {
        rect(x * size, y * size, size, size);
    }
}

19×19 20×20

Answer 1

Yo have to iterate from 0 to the number of cells, rather than from 0 to size. size is the size of a single cell, not the number if cells:

let no_of_cells = 20;
let size = width / no_of_cells;
for (let x = 0; x < no_of_cells; x++) {
    for (let y = 0; y < no_of_cells; y++) {
        rect(x * size, y * size, size, size);
    }
}