Как нарисовать сетку на Canvas?

1
2
3
4

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var step = 20; // расстояние между линиями
for (var i = 0.5; i < canvas.width; i += step) {
  ctx.moveTo(i, 0);
  ctx.lineTo(i, canvas.height);
}
for (var i = 0.5; i < canvas.height; i += step) {
  ctx.moveTo(0, i);
  ctx.lineTo(canvas.width, i);
}
ctx.stroke();