Try it Yourself: Canvas Coordinates

Canvas Coordinates

<!DOCTYPE html>
<html>
<body>

<canvas id="grid" width="300" height="200" style="border:1px solid #ccc"></canvas>

<script>
  const ctx = document.getElementById("grid").getContext("2d");

  ctx.fillStyle = "crimson";
  ctx.fillRect(0, 0, 10, 10);

  ctx.fillStyle = "seagreen";
  ctx.fillRect(290, 0, 10, 10);

  ctx.fillStyle = "royalblue";
  ctx.fillRect(0, 190, 10, 10);

  ctx.fillStyle = "goldenrod";
  ctx.fillRect(290, 190, 10, 10);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="grid" width="300" height="200" style="border:1px solid #ccc"></canvas>

<script>
  const ctx = document.getElementById("grid").getContext("2d");

  ctx.fillStyle = "crimson";
  ctx.fillRect(0, 0, 10, 10);

  ctx.fillStyle = "seagreen";
  ctx.fillRect(290, 0, 10, 10);

  ctx.fillStyle = "royalblue";
  ctx.fillRect(0, 190, 10, 10);

  ctx.fillStyle = "goldenrod";
  ctx.fillRect(290, 190, 10, 10);
</script>

</body>
</html>