在HTML5画布上绘制具有奇数行和列的网格

Question

我想在HTML5画布上绘制网格系统。

现在我的代码如下：

//first my canvas in the body tag
<canvas id="canvas" width="600" height="600">
  canvas kunne ikke vises
</canvas>

//the script for drawing a grid system with a count
<script>
  c = document.getElementById('canvas');
  boxes = 20;
  size = 20;
  var ctx = c.getContext('2d');
  ctx.strokeStyle ='black';
  ctx.lineWidth = 4;
  c.addEventListener('click', handleClick);

  draw();

  function draw() {

  var len = c.height = c.width = boxes * size;

   for (var i = 0; i < boxes; i++) {
       ctx.beginPath();
       ctx.moveTo(size + size * i - .5, 0);
       ctx.lineTo(size + size * i - .5, len);
       ctx.moveTo(0, size + size * i - .5);
       ctx.lineTo(len, size + size * i - .5);
       ctx.stroke();
    }
  }

 </script>

并且网格看起来如图所示：

我希望网格看起来像这张图片：

我试图在自己的代码中编辑变量“ boxes”，但它的数学运算只是20 * 20或30 * 30。谁能告诉我如何制作示例变量来计算像垂直10个框和水平6个框这样的网格？