如何在4x4网格的中心绘制y轴和x轴线？

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  // 绘制y轴线
  ctx.beginPath();
  ctx.moveTo(200, 0); // 起点坐标为(200, 0)
  ctx.lineTo(200, 400); // 终点坐标为(200, 400)
  ctx.stroke();
</script>

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  // 绘制x轴线
  ctx.beginPath();
  ctx.moveTo(0, 200); // 起点坐标为(0, 200)
  ctx.lineTo(400, 200); // 终点坐标为(400, 200)
  ctx.stroke();
</script>