Chapter 42: Canvas Curves
Canvas Curves the way a patient, enthusiastic teacher would explain it to someone who really wants to understand deeply.
We’re going to build this slowly, step by step, with tiny complete runnable examples. No skipping, no magic formulas you just copy-paste without knowing why, just clear English explanations, visual thinking, common beginner traps, and repeated patterns until curves feel completely natural and easy to control.
Canvas Curves – From Zero to Confident
1. The single most important mental model about curves in Canvas
A curve in Canvas is not a permanent object (like in SVG where you can later say “move this Bézier”). It is a smooth path you describe once using control points, then you tell the painter to:
- stroke() → draw the outline
- fill() → fill the closed area (if you close the path)
After stroke() or fill(), those pixels are just pixels — there is no curve object you can edit later. If you want to move the curve, change its shape, or animate it → you have to erase the old curve (usually with clearRect) and draw a new curve with updated points.
2. Two main types of curves in Canvas (you will use these 95% of the time)
| Curve Type | Command | How many control points? | When to use it | Difficulty |
|---|---|---|---|---|
| Quadratic Bézier | quadraticCurveTo(cx, cy, x, y) | 1 control point | Simple smooth arcs, rounded corners, basic waves | Easy ★★☆☆☆ |
| Cubic Bézier | bezierCurveTo(c1x,c1y, c2x,c2y, x,y) | 2 control points | Complex smooth curves, S-shapes, organic paths, letter shapes | Medium ★★★★☆ |
Quick mental picture of control points
- Start point → where the curve begins (set by previous moveTo or lineTo)
- Control point(s) → “pull” the curve toward them (but the curve never actually touches them unless you want it to)
- End point → where the curve finishes
3. Minimal complete quadratic curve example (copy → run)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – First Quadratic Curve</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Helper: draw small red dot at point (x,y) with label function dot(x, y, label) { ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(x, y, 6, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = '#333'; ctx.font = '14px Arial'; ctx.textAlign = 'center'; ctx.fillText(label, x, y - 12); } // Draw the curve ctx.beginPath(); ctx.moveTo(100, 300); // start point ctx.quadraticCurveTo( 300, 100, // control point (pulls the curve) 500, 300 // end point ); ctx.strokeStyle = '#2196F3'; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.stroke(); // Show all points dot(100, 300, 'Start'); dot(300, 100, 'Control'); dot(500, 300, 'End'); ctx.fillStyle = '#333'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.fillText('Quadratic Bézier Curve', 300, 60); </script> </body> </html> |
What you should see & remember forever:
- Blue smooth curve from (100,300) → (500,300)
- Pulled upward by the red control point at (300,100)
- Curve never touches the control point — it only gets attracted toward it
- quadraticCurveTo = one control point → simple, gentle curves
4. Cubic Bézier – the more powerful (and more common) curve
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
ctx.beginPath(); ctx.moveTo(100, 300); // start ctx.bezierCurveTo( 200, 100, // control point 1 400, 100, // control point 2 500, 300 // end point ); ctx.strokeStyle = '#F44336'; ctx.lineWidth = 12; ctx.lineCap = 'round'; ctx.stroke(); // Show points dot(100, 300, 'Start'); dot(200, 100, 'Control 1'); dot(400, 100, 'Control 2'); dot(500, 300, 'End'); |
Key differences from quadratic:
- Two control points → you can make S-shapes, loops, very sharp or very smooth curves
- Most professional icons, letterforms, organic paths, and animations use cubic Bézier
5. Very useful pattern – Rounded corners with quadratic curves
Many people think you need roundRect (modern browsers only) — but you can make rounded rectangles manually with quadratic curves:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function roundedRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r); ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y); ctx.closePath(); } |
6. Your three tiny practice tasks (10–15 min each)
Task 1 – Simple wave Draw a horizontal wavy line using three quadratic curves Start at left side → wave up → down → up → end at right side
Task 2 – Heart shape Use four cubic Bézier curves to make a classic heart (Google “canvas heart path” for inspiration — but try first!)
Task 3 – Smiley face with curves Yellow filled circle face Two small black filled circles (eyes) One thick red quadratic arc for smiling mouth
Paste any of them here when you finish — I’ll review it like we’re pair-programming together.
Which part still feels a little slippery?
- Difference between quadratic (1 control) vs cubic (2 controls)?
- How control points “pull” the curve without the curve touching them?
- Why beginPath() is needed before every curve?
- Making smooth continuous curves (joining multiple Béziers)?
- Something else?
Tell me — we’ll stay on curves until you feel super confident shaping anything you imagine.
You’re doing really well — curves are the secret sauce that makes Canvas graphics look organic and professional! 🚀
