Drawing Basics

Circle Marker

Arc Becomes a Badge

A canvas drawing starts with a blank stage, builds a circular path, fills it, then strokes the edge.

Program

Canvas drawing is immediate: path commands collect geometry, then fill and stroke write pixels to the bitmap.

circle_marker.html
Visuals: captured from real browser rendering
<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.fillStyle = "#f8fafc";
  ctx.fillRect(0, 0, 360, 210);
  ctx.beginPath();
  ctx.arc(180, 105, 54, 0, Math.PI * 2);
  ctx.fillStyle = "#0f766e";
  ctx.fill();
  ctx.strokeStyle = "#134e4a";
  ctx.lineWidth = 6;
  ctx.stroke();
</script>

  1. Paint the canvas background.

    A pale canvas stage fills the drawing area.
    fillRect writes the background pixels first.

  2. Start a new circle path.

    The canvas still looks blank while the path starts.
    beginPath resets geometry; it does not paint pixels.

  3. Add a full circle arc.

    A circular path outline is shown as pending geometry.
    arc adds the circle to the path before anything is painted.

  4. Fill the circle path.

    A filled teal circle appears in the center of the canvas.
    fill paints the inside of the current path.

  5. Set the outline width.

    The circle is ready for a thicker outline.
    lineWidth changes how thick the next stroke will be.

  6. Stroke the circle outline.

    A filled teal circle with a dark outline completes the canvas marker.
    stroke paints the path outline after the fill.
arc arc adds circular geometry to the current path.
fill and stroke fill paints the inside of the path; stroke paints its outline.