JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  </head>

  <body>
    <canvas id="canvas" width="250" height="250" style="border: 1px solid black;"> 
    </canvas>
  </body>
</html>

JavaScript

var cnv  = document.getElementById ('canvas');
var size = 10;

console.log (drawGrid (cnv, size));

function drawGrid (cnv, size) {
  var box 	 = { };
	var ctx 	 = cnv.getContext ('2d');
  var width  = cnv.width;
  var height = cnv.height;
  var cols   = Math.floor (width / size);
  var rows   = Math.floor (height / size);

  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      if (! (i in box)) {
        box [i] = { };
      }

      box [i] [j] = {
        x: i * size,
        y: j * size,
        width: size,
        height: size
      };

      ctx.rect.apply (ctx, Object.values (box [i] [j]));
      ctx.stroke ();
    }
  }

  return box;
}