Draw Grid with Gap on Canvas

canvas-grid-gap.md

canvas-grid-no-edge.md

// canvas size
const w = 512;
const h = 512;

const columnSize = 6;
const rowSize = 6;
const gap = 10;

const itemWidth = (w + gap) / columnSize
const itemHeight = (h + gap) / rowSize;

for (let col = 0; col < columnSize; col++) {
  for (let row = 0; row < rowSize; row++) {
    ctx.save();
    ctx.fillStyle = randomColor();
    ctx.fillRect(
      itemWidth * col, 
      itemHeight * row, 
      itemWidth - gap, 
      itemHeight - gap
    );
    ctx.restore();  
  }
}

Result

canvas-with-edge.js

// canvas size
const w = 512;
const h = 512;

const columnSize = 6;
const rowSize = 6;
const gap = 10;

const itemWidth = (w - gap) / columnSize
const itemHeight = (h - gap) / rowSize;

for (let col = 0; col < columnSize; col++) {
  for (let row = 0; row < rowSize; row++) {
    ctx.save();
    ctx.fillStyle = randomColor();
    ctx.fillRect(
      itemWidth * col + gap, 
      itemHeight * row + gap, 
      itemWidth - gap, 
      itemHeight - gap
    );
    ctx.restore();  
  }
}