Почему первая и последняя линия тонкая?

Question

[Кирилл]

HTML

<div id="board">
      <canvas id="canvas"></canvas>
    </div>

    <script src="test_dom.js"></script>

CSS

body {
  margin: 0;
}
#canvas {
  margin: 50px;
}

JS

let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");

canvas.width = 720;
canvas.height = 720;

let coordinate = 0;
for (let i = 1; i <= 19; i++) {
  ctx.moveTo(0, coordinate);
  ctx.lineTo(800, coordinate);
  ctx.moveTo(coordinate, 800);
  ctx.lineTo(coordinate, 0);
  ctx.stroke();
  coordinate += 40;
}

И как можно изменить стили этих линий?

Comments

[Кирилл]

Как все линии можно сделать тоньше?

[Кирилл]

Ankhena, Как для примеру?

[Ankhena]

Кирилл,

for (let i = 0.5; i <= 720; i+=40) {
  ctx.moveTo(0, i);
  ctx.lineTo(800, i);
  ctx.moveTo(i, 800);
  ctx.lineTo(i, 0);
}

С последней границей только разберитесь, либо канвас увеличьте либо полоску еще одну нарисуйте.

[Кирилл]

Ankhena, Спасибо

Answer 1

[abberati]

Вы для каждой клетки рисуете четыре стороны толщиной в 1px. Вполне естественно, что на границе двух клеток границы клеток образуют линию толщиной в 2px.

Comments

[Кирилл]

Как это сделать?
Как задать толщину линий?