How many boxes per row :
The HTML file:

<html>
<head>
</head>
<body>

<!-- the canvas -->
    <canvas id="Board" width=500 height=500></canvas>
<p>

<!-- The user interface -->
<b>How many boxes per row :</b>
<input
      type="text"
      maxLength = "3"
      size = "3"
      id="BoxCount">

<button type="button" id="redraw" onclick="RedrawBoard()">Redraw</button>

<!-- the code -->
<script>
  // a constant array of colors
  const COLORS = ["red","green", "blue", "cyan", "yellow", "magenta"];

  // global variables
  var canvas = document.getElementById('Board');
  var ctx = canvas.getContext('2d');
  var Boxes = 10;

  // a function do do the drawing
  function DrawBoard(dim, count, offset) {
      var i,j, colorIndex;

      colorIndex = 0;

      for(i=0; i<count; i++) {
         for(j=0; j < count; j++) {
	     // set the color
	     ctx.fillStyle = COLORS[colorIndex];

	     // get the next color index
	     colorIndex =  (colorIndex+1) % COLORS.length;

	     // draw the rectangle
	     ctx.fillRect(offset + i*dim, offset + j*dim, dim, dim);
	 }
      }
      return;
  }

  function RedrawBoard() {
      // grab the new box size and check for (some) validitiy in box count
      var boxSize = document.getElementById("BoxCount").value;
      if (boxSize < 1) {
          alert("You need a positive number of boxes");
	  document.getElementById("BoxCount").value = Boxes;
	  return;
      } else if (boxSize > canvas.width) {
          alert("Maximum box size is "+canvas.width);
	  document.getElementById("BoxCount").value = Boxes;
	  return;
      }
 
      // ok it is valid, save it.
      Boxes = boxSize;

      // blank the screen
      ctx.clearRect(0,0, canvas.width, canvas.height);

      // how wide should each box be
      var dimension = Math.floor(canvas.width/boxSize);

      // left over pixels should be spread across the outside edges.
      var offset = (canvas.width - dimension * boxSize)/2;

      DrawBoard(dimension, Boxes, offset);
      return;
  }

  // Fill in the default value for the boxes
  document.getElementById("BoxCount").value = Boxes;
  RedrawBoard();

</script>
</body>
</html>