Drawing Basics

Stroke Path

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
Visuals: captured from real browser rendering
<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>

  1. Start a new path.

    The canvas remains blank while a new path starts.
    beginPath resets geometry but does not paint pixels.

  2. Move the path cursor to the first point.

    The path has a start point but no visible line yet.
    moveTo positions the cursor without drawing.

  3. Add line segments to the path.

    The path geometry now has two segments but is still invisible.
    lineTo extends the path; stroke is still needed to paint it.

  4. Paint the stroked path.

    A thick blue polyline appears across the canvas.
    stroke paints the accumulated path geometry.
path A canvas path is geometry collected before painting.
stroke stroke paints the outline of the current path.