Try it Yourself: Canvas Lines

Canvas Lines

<!DOCTYPE html>
<html>
<body>

<canvas id="singleLine" width="300" height="150"></canvas>

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

  ctx.beginPath();
  ctx.moveTo(30, 100);
  ctx.lineTo(270, 30);
  ctx.strokeStyle = "darkslategray";
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="singleLine" width="300" height="150"></canvas>

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

  ctx.beginPath();
  ctx.moveTo(30, 100);
  ctx.lineTo(270, 30);
  ctx.strokeStyle = "darkslategray";
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

</body>
</html>