Chapter 35: Canvas Element & 2D Graphics Basics

Paths, Lines & Bézier Curves

Sub-path construction (`beginPath`, `moveTo`, `lineTo`, `closePath`), Quadratic and Cubic Bézier mathematics, line caps, corner joins, dashed lines, and `Path2D` objects.

LEARNING OBJECTIVES ⌵

Master the 5-step path construction lifecycle: beginPath, moveTo, lineTo, closePath, and stroke/fill.
Configure advanced line aesthetics including lineCap, lineJoin, miterLimit, and animated setLineDash.
Understand the control point mathematics of Quadratic (quadraticCurveTo) and Cubic (bezierCurveTo) Bézier curves.
Utilize the Path2D API to instantiate and reuse complex path objects (including raw SVG path strings).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

The Invisible Laser Plotter & The Inker

Unlike fillRect, which instantly stains pixels on contact, drawing complex shapes in Canvas requires a two-step mental model:

+-----------------------------------------------------------------------------+
|                      THE PATH LIFECYCLE MENTAL MODEL                        |
+-----------------------------------------------------------------------------+

 STEP 1: THE INVISIBLE LASER POINTER (Geometry Construction)
 - You guide an invisible mathematical beam across the canvas:
   1. ctx.beginPath()       ---> Wipes away any previous mathematical blueprints.
   2. ctx.moveTo(50, 50)    ---> Lifts the laser head and places it at (50, 50).
   3. ctx.lineTo(150, 50)   ---> Guides the beam to draw an invisible segment.
   4. ctx.bezierCurveTo()   ---> Bends the beam using magnetic control points.
   5. ctx.closePath()       ---> Snaps the beam back to the starting point.
   
 (At this point, ZERO PIXELS have been drawn. The canvas is completely blank!)

 STEP 2: THE INKING ARM (Rasterization)
 - You command the inker to apply pigment to the invisible laser blueprint:
   * ctx.stroke()  ---> Pours ink ALONG the laser outline (lineWidth, cap, join).
   * ctx.fill()    ---> Floods the interior enclosed region with fillStyle.

If you forget ctx.beginPath(), the laser keeps all previously drawn shapes in its memory buffer. Every time you call ctx.stroke(), the browser will re-paint all old shapes over and over again, killing performance!

Technical Deep Dive & Specifications

The Path Construction API Methods

ctx.beginPath();         // 1. Reset current sub-path list
ctx.moveTo(100, 100);    // 2. Teleport pen to (100, 100) without drawing
ctx.lineTo(200, 100);    // 3. Add straight line segment to (200, 100)
ctx.lineTo(150, 200);    // 4. Add straight line segment to (150, 200)
ctx.closePath();         // 5. Add straight line connecting back to (100, 100)

ctx.fillStyle = '#3b82f6';
ctx.fill();              // 6. Paint the interior

ctx.strokeStyle = '#1d4ed8';
ctx.lineWidth = 3;
ctx.stroke();            // 7. Paint the outline

Line Styling Attributes & Geometries

1. `ctx.lineCap` (End-Point Termination)

Controls how the endpoints of every unclosed line segment are capped:

'butt' (Default): Flat edge exactly at the endpoint.
      [==============================] (x0 to x1)

'round': Semicircular cap extending past the endpoint by radius = lineWidth / 2.
    ( [==============================] )

'square': Rectangular box extending past the endpoint by distance = lineWidth / 2.
   [  [==============================]  ]

2. `ctx.lineJoin` (Corner Vertex Junctions)

Controls how two intersecting line segments are joined together:

'miter' (Default): Sharp pointed corner.
       /\
      /  \
     /    \

'round': Rounded corner with radius = lineWidth / 2.
      (  )
     /    \

'bevel': Flat beveled diagonal slice across the corner.
      /__\
     /    \

ctx.miterLimit: Floating point number (default 10.0). Prevents infinitely sharp spikes on acute angles. If the miter length divided by line width exceeds miterLimit, the corner automatically snaps to 'bevel'.

3. Dashed Lines (`setLineDash` & `lineDashOffset`)

// Pattern: [dashLength, spaceLength, dashLength, spaceLength...]
ctx.setLineDash([12, 6, 4, 6]); 
ctx.lineDashOffset = 0; // Animatable offset for "marching ants" effects

Bézier Curves: The Math & Anatomy

1. QUADRATIC BÉZIER (1 Control Point)
   ctx.quadraticCurveTo(cpx, cpy, x, y);

          CP (cpx, cpy)  <--- Magnetic Control Point pulls the curve upward
          .  
        /   \
       /     \
   Start      End (x, y)


2. CUBIC BÉZIER (2 Control Points - S-Curves & Complex Inflections)
   ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

       CP1 (cp1x, cp1y)
        .
       /   \
   Start     \          . CP2 (cp2x, cp2y)
               \       /
                 End (x, y)

The `Path2D` Object Architecture

Introduced in HTML5 Canvas Level 2, Path2D lets you store path geometry in reusable JavaScript objects, decoupled from the context:

// 1. Create reusable Path2D instances
const triangle = new Path2D();
triangle.moveTo(50, 10);
triangle.lineTo(90, 90);
triangle.lineTo(10, 90);
triangle.closePath();

// 2. Create directly from SVG Path strings!
const heart = new Path2D('M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z');

// 3. Render anywhere with simple context calls
ctx.fillStyle = '#ef4444';
ctx.fill(heart);
ctx.stroke(triangle);

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Lines 49–60: Renders three thick horizontal strokes with 'butt', 'round', and 'square' line caps. The guide ticks at $X=50$ and $X=200$ clearly show how 'round' and 'square' extend beyond the coordinates.
Lines 68–74 (setLineDash([10, 5])): Applies an alternating pattern of $10\text{px}$ dash and $5\text{px}$ gap. Modulating lineDashOffset = -dashOffset in requestAnimationFrame generates a continuous smooth marching-ants marquee animation.
Lines 80–84: Defines start coordinate, two magnetic inflection control points (cp1, cp2), and destination endpoint.
Lines 105–109 (ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y)): Traces a smooth mathematical cubic curve flowing towards cp1, undulating through the inflection point, and being pulled by cp2 into end.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Paths & Curves</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #020617;
      color: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem;
    }
    canvas {
      background: #0b0f19;
      border: 1px solid #1e293b;
      border-radius: 12px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    }
  </style>
</head>
<body>

<h1>Paths, Bézier Curves & Line Styles</h1>
  <canvas id="curveCanvas" width="600" height="380"></canvas>

let dashOffset = 0;

function renderScene() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// -------------------------------------------------------------
      // 1. Line Cap Styles Demo
      const caps = ['butt', 'round', 'square'];
      const capColors = ['#f43f5e', '#10b981', '#38bdf8'];

caps.forEach((cap, idx) => {
        const y = 50 + idx * 35;
        
        // Guideline markers at endpoints
        ctx.strokeStyle = '#334155';
        ctx.lineWidth = 1;
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(50, y);
        ctx.lineTo(200, y);
        ctx.stroke();

// Thick line testing lineCap
        ctx.strokeStyle = capColors[idx];
        ctx.lineWidth = 16;
        ctx.lineCap = cap;
        ctx.beginPath();
        ctx.moveTo(50, y);
        ctx.lineTo(200, y);
        ctx.stroke();

// Label
        ctx.fillStyle = '#94a3b8';
        ctx.font = '12px monospace';
        ctx.fillText(`lineCap: '${cap}'`, 220, y + 4);
      });

// -------------------------------------------------------------
      // 2. Animated Marching Ants Dashed Line
      ctx.lineWidth = 3;
      ctx.strokeStyle = '#facc15';
      ctx.lineCap = 'butt';
      ctx.setLineDash([10, 5]);
      ctx.lineDashOffset = -dashOffset; // Animate dash offset

ctx.beginPath();
      ctx.moveTo(50, 180);
      ctx.lineTo(550, 180);
      ctx.stroke();

ctx.fillStyle = '#facc15';
      ctx.font = '12px monospace';
      ctx.fillText('Animated Dashed Vector: setLineDash([10, 5])', 50, 205);

// -------------------------------------------------------------
      // 3. Smooth Cubic Bézier Curve with Tangent Visualizers
      const start = { x: 60, y: 330 };
      const cp1   = { x: 180, y: 220 };
      const cp2   = { x: 380, y: 380 };
      const end   = { x: 540, y: 240 };

// Draw Control Point Tangent Handles
      ctx.strokeStyle = '#475569';
      ctx.lineWidth = 1.5;
      ctx.setLineDash([4, 4]);
      ctx.beginPath();
      ctx.moveTo(start.x, start.y);
      ctx.lineTo(cp1.x, cp1.y);
      ctx.moveTo(end.x, end.y);
      ctx.lineTo(cp2.x, cp2.y);
      ctx.stroke();

// Draw Control Point Anchor Dots
      [cp1, cp2].forEach((cp, idx) => {
        ctx.fillStyle = idx === 0 ? '#ec4899' : '#06b6d4';
        ctx.beginPath();
        ctx.arc(cp.x, cp.y, 5, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillText(`CP${idx + 1} (${cp.x}, ${cp.y})`, cp.x + 8, cp.y - 8);
      });

// Draw Main Cubic Bézier Curve
      ctx.setLineDash([]);
      ctx.strokeStyle = '#a855f7';
      ctx.lineWidth = 4;
      ctx.beginPath();
      ctx.moveTo(start.x, start.y);
      ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
      ctx.stroke();

// -------------------------------------------------------------
      // Advance animation
      dashOffset += 0.5;
      requestAnimationFrame(renderScene);
    }

renderScene();
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+-------------------------------------------------------------+
| [=== BUTT ===]       lineCap: 'butt'                        |
| ( === ROUND === )    lineCap: 'round'                       |
| [ === SQUARE === ]   lineCap: 'square'                      |
|                                                             |
| - - - - - - - - - - - - - - - - - - (Marching Ants Dash)    |
|                                                             |
|         CP1 (180, 220) *                                    |
|         /               \                                   |
|   Start                  \                   * CP2 (380,380)|
|                           \                /                |
|                            ~ ~ ~ ~ ~ ~  End                 |
+-------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Smooth Cryptocurrency Area Spline Chart

Instructions:

Given an array of 6 financial price points [120, 180, 140, 260, 210, 310]:
Construct a smooth continuous Bézier curve across the points:
- For each adjacent pair $(P_{i}, P_{i+1})$, calculate control points to generate a smooth wave without sharp zig-zag corners.
Create a glowing vertical gradient beneath the curve:
- Close the path down to the baseline axis ($Y = 320$) and back to the start.
- Fill the closed polygon with a translucent gradient (#10b98180 fading to #10b98100).
Stroke the top price curve line with a glowing $3\text{px}$ neon emerald stroke.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Crypto Area Spline Challenge</title>
  <style>
    body { background: #020617; color: white; display: grid; place-items: center; min-height: 100vh; margin: 0; }
    canvas { background: #090d16; border: 1px solid #1e293b; border-radius: 12px; }
  </style>
</head>
<body>

const prices = [
      { x: 50,  y: 260 },
      { x: 140, y: 190 },
      { x: 230, y: 230 },
      { x: 320, y: 110 },
      { x: 410, y: 160 },
      { x: 500, y: 70  }
    ];

function drawAreaSpline(ctx, pts) {
      // TODO:
      // 1. Build smooth curve across all points using quadraticCurveTo midpoints
      // 2. Close path to baseline (y=320) and fill with linear gradient
      // 3. Re-stroke top line with emerald green
      // 4. Draw data point circles at each node
    }

drawAreaSpline(ctx, prices);
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cryptocurrency Spline Area Chart</title>
  <style>
    body {
      background-color: #020617;
      color: #f8fafc;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
    }
    .chart-wrapper {
      background: #0f172a;
      border: 1px solid #1e293b;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>

  <div class="chart-wrapper">
    <h3 style="margin-top: 0; color: #10b981;">ETH/USD Real-Time Price Spline</h3>
    <canvas id="splineCanvas" width="550" height="350"></canvas>
  </div>

  <script>
    const canvas = document.getElementById('splineCanvas');
    const ctx = canvas.getContext('2d');

    const points = [
      { x: 50,  y: 260 },
      { x: 140, y: 190 },
      { x: 230, y: 230 },
      { x: 320, y: 110 },
      { x: 410, y: 160 },
      { x: 500, y: 70  }
    ];

    function drawSplineChart(ctx, pts) {
      const baselineY = 310;

      // 1. Gridlines
      ctx.strokeStyle = '#1e293b';
      ctx.lineWidth = 1;
      for (let y = 60; y <= baselineY; y += 50) {
        ctx.beginPath();
        ctx.moveTo(40, y);
        ctx.lineTo(510, y);
        ctx.stroke();
      }

      // 2. Build Smooth Spline Path (Using Midpoint Quadratic Algorithm)
      const splinePath = new Path2D();
      splinePath.moveTo(pts[0].x, pts[0].y);

      for (let i = 0; i < pts.length - 1; i++) {
        const pCurrent = pts[i];
        const pNext = pts[i + 1];
        const midX = (pCurrent.x + pNext.x) / 2;
        const midY = (pCurrent.y + pNext.y) / 2;

        if (i === 0) {
          // First segment connects directly to first midpoint
          splinePath.quadraticCurveTo(pCurrent.x, pCurrent.y, midX, midY);
        } else {
          splinePath.quadraticCurveTo(pCurrent.x, pCurrent.y, midX, midY);
        }
      }
      // Connect to final point
      const last = pts[pts.length - 1];
      const secondLast = pts[pts.length - 2];
      splinePath.quadraticCurveTo(secondLast.x, secondLast.y, last.x, last.y);

      // 3. Create Area Fill Polygon
      const areaPath = new Path2D(splinePath);
      areaPath.lineTo(last.x, baselineY);
      areaPath.lineTo(pts[0].x, baselineY);
      areaPath.closePath();

      // Translucent Area Gradient
      const areaGrad = ctx.createLinearGradient(0, 50, 0, baselineY);
      areaGrad.addColorStop(0, 'rgba(16, 185, 129, 0.45)');
      areaGrad.addColorStop(1, 'rgba(16, 185, 129, 0.00)');

      ctx.fillStyle = areaGrad;
      ctx.fill(areaPath);

      // 4. Stroke Top Spline Curve
      ctx.strokeStyle = '#10b981';
      ctx.lineWidth = 3;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      ctx.stroke(splinePath);

      // 5. Render Node Points
      pts.forEach((p, idx) => {
        ctx.beginPath();
        ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
        ctx.fillStyle = '#020617';
        ctx.fill();
        ctx.strokeStyle = '#34d399';
        ctx.lineWidth = 2.5;
        ctx.stroke();
      });
    }

    drawSplineChart(ctx, points);
  </script>
</body>
</html>

Why this works:

The Midpoint Quadratic Spline algorithm creates continuous tangential smoothness ($C^1$ continuity) through all control points without angular sharp bends.
Using Path2D allows cloning the top curve into areaPath to close down to the baseline axis without duplicating math.

⚠️ Common Pitfalls

Omitting beginPath() Inside Loops: Forgetting to call ctx.beginPath() before starting a new path leaves all previous lines in the active path list. Every ctx.stroke() will re-draw every line created since the last reset, resulting in severe CPU lag.
closePath() Instead of lineTo() on Non-Enclosed Curves: Calling closePath() automatically connects the final endpoint back to the first moveTo() coordinate with a straight segment. Only use closePath() when intending to create closed geometric polygons.
The Corner Notch Bug: Joining lines with manual moveTo/lineTo calls rather than continuous lineTo chains causes the browser to render disconnected endpoints instead of clean lineJoin miter/round corners.

💡 Pro Tips

Leverage SVG Path Strings via Path2D: Instead of writing hundreds of lineTo commands for complex logos or icons, export an SVG <path d="M...Z"> string from Figma and instantiate it directly: const icon = new Path2D(svgDString).
Marching Ants Animation with lineDashOffset: Incrementing or decrementing ctx.lineDashOffset inside a requestAnimationFrame loop creates high-performance animated dashed selection borders (like Photoshop's marquee tool).
Avoid Overly Deep Miter Spikes with miterLimit: On acutely sharp angles ($<15^\circ$), miter joins can spike hundreds of pixels off-screen. Configure ctx.miterLimit = 3.0 to automatically bevel extreme acute corners.

📌 Key Takeaways

Canvas path generation is a two-step process: mathematical trajectory definition followed by stroke() or fill().
beginPath() clears the active sub-path list and is mandatory before starting new independent geometries.
lineCap controls line endpoints (butt, round, square); lineJoin controls corner vertices (miter, round, bevel).
Quadratic curves use 1 control point (quadraticCurveTo), while Cubic curves use 2 control points (bezierCurveTo).
Path2D objects encapsulate geometry, can parse SVG path strings, and can be rendered repeatedly across frames.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

What is the primary visual difference between `ctx.lineCap = 'butt'` and `ctx.lineCap = 'square'` on a line with `lineWidth = 20`?

Topic: HTML Fundamentals

? Question 2 / 3

How many control points are required to define a Cubic Bézier curve in Canvas 2D via `ctx.bezierCurveTo()`?

Topic: HTML Fundamentals

? Question 3 / 3

What happens if a developer creates multiple paths in a 60 FPS animation loop without ever calling `ctx.beginPath()`?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

The Invisible Laser Plotter & The Inker

Technical Deep Dive & Specifications

The Path Construction API Methods

Line Styling Attributes & Geometries

1. ctx.lineCap (End-Point Termination)

2. ctx.lineJoin (Corner Vertex Junctions)

3. Dashed Lines (setLineDash & lineDashOffset)

Bézier Curves: The Math & Anatomy

The Path2D Object Architecture

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Smooth Cryptocurrency Area Spline Chart

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What is the primary visual difference between ctx.lineCap = 'butt' and ctx.lineCap = 'square' on a line with lineWidth = 20?

How many control points are required to define a Cubic Bézier curve in Canvas 2D via ctx.bezierCurveTo()?

What happens if a developer creates multiple paths in a 60 FPS animation loop without ever calling ctx.beginPath()?

1. `ctx.lineCap` (End-Point Termination)

2. `ctx.lineJoin` (Corner Vertex Junctions)

3. Dashed Lines (`setLineDash` & `lineDashOffset`)

The `Path2D` Object Architecture

What is the primary visual difference between `ctx.lineCap = 'butt'` and `ctx.lineCap = 'square'` on a line with `lineWidth = 20`?

How many control points are required to define a Cubic Bézier curve in Canvas 2D via `ctx.bezierCurveTo()`?

What happens if a developer creates multiple paths in a 60 FPS animation loop without ever calling `ctx.beginPath()`?