Stroke Path - Canvas

A path begins empty, receives points, and then stroke paints a polyline through those points.

Program

Canvas path methods build an invisible path. The path becomes visible only when a paint method such as stroke is called.

stroke_path.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.strokeStyle = "#1d4ed8";
  ctx.lineWidth = 8;
  ctx.beginPath();
  ctx.moveTo(40, 160);
  ctx.lineTo(140, 70);
  ctx.lineTo(260, 120);
  ctx.stroke();
</script>

path A canvas path is geometry collected before painting.

stroke stroke paints the outline of the current path.