<head>
  
</head>
<body>
    <canvas id="canvas"></canvas>

   

#canvas{
  margin: 10px;
}
// Constants for the number of rows and columns
const rows = 10; // You can change this value from 10 to 100
const cols = 10; // You can change this value from 10 to 100
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");

function gcd(a, b) {
    if (b === 0) {
        return a;
    } else {
        return gcd(b, a % b);
    }
}


const gcdValue = gcd(rows, cols);

const squareSize = Math.round(Math.min(canvas.width / cols, canvas.height / rows));


const offsetX = Math.abs(canvas.width - cols * squareSize) / 2;
const offsetY = Math.abs(canvas.height - rows * squareSize) / 2;

// Draw the grid of squares
for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
        ctx.strokeRect(offsetX + col * squareSize, offsetY + row * squareSize, squareSize, squareSize);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.