Input HarborISSUE #18 of 46

canvas · paths · arcs · curves

FormaVSCaptain Invalid Input

Forma saysCanvas paths let you draw lines, arcs, and curves — begin a path, move, draw, then stroke or fill it.

Beyond rectangles, canvas draws arbitrary shapes via paths. Call beginPath(), position with moveTo(x,y), add segments with lineTo, arc (circles), or bezierCurveTo, then render with stroke() (outline) or fill().

Paths are stateful: every segment adds to the current path until the next beginPath(). Forgetting to begin a new path is the classic bug where old shapes get re-stroked with new styles.

Power-ups you unlock

beginPath() → moveTo/lineTo/arc → stroke() or fill()
arc(x,y,r,start,end) draws circles and arcs
stroke = outline · fill = solid
Each beginPath() starts a fresh shape

Captain Invalid Input attacks — common mistakes

Skipping beginPath() so all shapes merge into one path
Angles in arc() are radians, not degrees
Calling stroke before defining any path segments

Boss battleDraw a triangle with lineTo and a full circle with arc(x, y, r, 0, Math.PI*2). Stroke one and fill the other.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;display:grid;place-items:center;height:100vh;margin:0">
  <canvas id="c" width="300" height="200" style="border:1px solid #2a1d4a"></canvas>
  <script>
    const x = document.getElementById('c').getContext('2d');
    x.strokeStyle = '#b388ff'; x.lineWidth = 2;
    x.beginPath(); x.moveTo(40,160); x.lineTo(100,40); x.lineTo(160,160); x.closePath(); x.stroke();
    x.fillStyle = '#8aff9d';
    x.beginPath(); x.arc(230, 100, 40, 0, Math.PI*2); x.fill();
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Canvas · Pixel-By-Pixel Drawing Canvas · Text · Images · Transforms ›