I’m trying to draw a simple grid like this: Grid
I want the grid to be 17×17. So I made a function to do that:
function drawGrid() {
let grids = 17;
let inc = cvs.width / 17;
let ct = 0;
for (let c = 0; c < cvs.width; c += inc) {
for (let r = 0; r < cvs.width; r += inc) {
if (ct % 2 === 0) {
ctx.fillStyle = "#aad751";
} else {
ctx.fillStyle = "#a1d149";
}
ctx.fillRect(r, c, inc, inc);
ct++;
}
}
}
Basically I have a loop that counts up 17 times in the row and column direction. Each time incrementing by the exact amount. I know width = height, so I just used width for everything. Each time I just alternate each box color, and draw it. Now on small sizes my code works perfectly, but once I make my display monitor large enough for some reason the grid becomes lines:
Example of wrong behavior
Any ideas why this is doing that?
Thanks!