Нарисуйте сетку с нечетным количеством строк и столбцов на холсте 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>

И сетка выглядит так, как на рисунке:

Я хочусетка, похожая на эту картинку:

Я попытался отредактировать переменные "ящики" в своем собственном коде, но это просто сделало математику 20 *20 или 30 * 30.Кто-нибудь может мне сказать, как сделать пример переменной для подсчета сетки, как 10 блоков по вертикали и 6 по горизонтали?