1 var myCanvas = document.querySelector('canvas');
2 var ctx = myCanvas.getContext('2d');
3
4 let gridSize = 10;
5 let canvasWidth = ctx.canvas.width;
6 let canvasHeight = ctx.canvas.height;
7
8 let xLineTotal = Math.floor(canvasHeight / gridSize);
9 let yLineTotal = Math.floor(canvasWidth / gridSize);
10
11 for (let i = 0; i <= xLineTotal; i++) {
12 ctx.beginPath();
13 ctx.moveTo(0, i * gridSize - 0.5);
14 ctx.lineTo(canvasWidth, i * gridSize - 0.5);
15 ctx.strokeStyle = '#eee';
16 ctx.stroke();
17 }
18
19 for (let i = 0; i <= yLineTotal; i++) {
20 ctx.beginPath();
21 ctx.moveTo(i * gridSize - 0.5, 0);
22 ctx.lineTo(i * gridSize - 0.5, canvasHeight);
23 ctx.strokeStyle = '#eee';
24 ctx.stroke();
25 }
