Drawing A Grid

Grid Size
Grid Color
Width
The HTML file:
<html>
<body>
<h1>Drawing A Grid</h1>
<table>
<tr><td>
<canvas id="grid" height="200" width="200" style="border:2px solid #000000;"></canvas>
</td><td>
<table>
<tr><td>
Grid Size <input id="gridSize", type="text" size=4></input>
</td></tr>
<tr><td>
Grid Color <select id="gridColor">
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
   <option value="black">Black</option>
</select>
</td></tr>
<tr><td>
Width <input type="range", min='1' max='5' value ='1' id="widthSlider">
</td></tr>
<tr><td>
<button type="button" onClick="RedrawGrid()">Redisplay</button>
</td></tr>
</table>
</td></tr>
</table>

</body>
</html>

<script type="text/javascript">
let c2 = document.getElementById("grid");
let w2 = c2.width;
let h2 = c2.height;
let ctx2 = c2.getContext("2d");
let skip = 20;
let color = "green";
let width = 2;

// get the interactors
let gridBox = document.getElementById("gridSize");
gridBox.value = skip;

let colorSelect = document.getElementById("gridColor");
colorSelect.value = color;

let widthSelect = document.getElementById("widthSlider");
widthSelect.value = width;

function DrawGrid(ctx, w, h, skip, color, width){
    let i;

    // clear the box
    ctx.clearRect(0,0,w,h);

    // draw the line

    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.beginPath();
    for(i =0; i <= w; i+= skip){
       ctx.moveTo(i,0);
       ctx.lineTo(i,h);
    }

    for(i =0; i <= h; i+= skip) {
       ctx.moveTo(0,i);
       ctx.lineTo(w,i);
    }

    ctx.stroke();
}

function RedrawGrid() {
      skip = parseInt(gridBox.value);
      color = colorSelect.value
      width = parseInt(widthSelect.value);

      console.log(w2, h2, skip);
      DrawGrid(ctx2, w2, h2, skip, color, width);
}

DrawGrid(ctx2, w2, h2, skip, color, width);

</script>
<body>
</html>