Chapter 42: Canvas Curves
1. What are “Canvas Curves” actually?
Canvas Curves means using JavaScript on the <canvas> element to draw smooth, bent, non-straight lines — arcs, waves, rounded corners, S-shapes, heart shapes, cartoon outlines, organic paths, bezier curves for animations, graphs with smooth interpolation, etc.
In Canvas there are no straight lines only — you can make any curve using just three main methods:
- arc() → simple circular curves (already covered in circles, but also used for rounded corners)
- quadraticCurveTo() → single control point curve (easier, good enough for most cases)
- bezierCurveTo() → two control points curve (most powerful, smoothest, used in icons, animations, professional drawings)
Why curves matter a lot:
- Straight lines look robotic → curves make drawings feel natural, friendly, modern
- Almost every real icon, button, logo, character, map route, loading spinner, wave background uses curves
- Curves are path-based — you always use beginPath(), moveTo/lineTo/curveTo, then stroke() or fill()
2. Your First Canvas Curve – Quadratic Curve (Copy-Paste & Run)
Create canvas-curve-quadratic.html:
HTML
|
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 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Curves – Quadratic</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Curves – Quadratic Curve (Single Control Point)</h1> <canvas id="curveCanvas" width="700" height="400"></canvas> <script> const canvas = document.getElementById('curveCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === Quadratic Curve – 1 control point === ctx.beginPath(); ctx.moveTo(100, 300); // Start point ctx.quadraticCurveTo( 350, 100, // Control point (pulls the curve) 600, 300 // End point ); ctx.strokeStyle = '#e74c3c'; // Red line ctx.lineWidth = 12; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke(); // Show control points & labels (for understanding) ctx.fillStyle = '#2c3e50'; ctx.font = '18px Arial'; // Start ctx.beginPath(); ctx.arc(100, 300, 6, 0, Math.PI * 2); ctx.fill(); ctx.fillText('Start', 110, 290); // Control point ctx.beginPath(); ctx.arc(350, 100, 6, 0, Math.PI * 2); ctx.fillStyle = '#f39c12'; ctx.fill(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Control Point', 360, 90); // End ctx.beginPath(); ctx.arc(600, 300, 6, 0, Math.PI * 2); ctx.fill(); ctx.fillText('End', 610, 290); ctx.fillText('Quadratic Curve: pulled by ONE control point', 350, 50); </script> </body> </html> |
What you see:
- Smooth red curve from left-bottom to right-bottom
- Pulled upward by the yellow control point in the middle
- Labels showing Start → Control → End
Memory hook: Quadratic = one control point = simple bend (good for 80% of curves)
3. The King: Cubic Bezier Curves (Two Control Points – Smoothest)
HTML
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Curves – Bezier</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Curves – Cubic Bezier (Two Control Points)</h1> <canvas id="bezierCanvas" width="700" height="500"></canvas> <script> const canvas = document.getElementById('bezierCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === Cubic Bezier Curve === ctx.beginPath(); ctx.moveTo(100, 400); // Start ctx.bezierCurveTo( 200, 100, // Control point 1 500, 400, // Control point 2 600, 200 // End point ); ctx.strokeStyle = '#9b59b6'; ctx.lineWidth = 14; ctx.lineCap = 'round'; ctx.stroke(); // Show points ctx.fillStyle = '#2c3e50'; ctx.font = '18px Arial'; ctx.beginPath(); ctx.arc(100, 400, 6, 0, Math.PI*2); ctx.fill(); ctx.fillText('Start', 110, 390); ctx.beginPath(); ctx.arc(200, 100, 6, 0, Math.PI*2); ctx.fillStyle = '#e74c3c'; ctx.fill(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Control 1', 210, 90); ctx.beginPath(); ctx.arc(500, 400, 6, 0, Math.PI*2); ctx.fillStyle = '#e74c3c'; ctx.fill(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Control 2', 510, 390); ctx.beginPath(); ctx.arc(600, 200, 6, 0, Math.PI*2); ctx.fill(); ctx.fillText('End', 610, 190); ctx.fillText('Cubic Bezier: pulled by TWO control points → very smooth S-shape', 350, 50); </script> </body> </html> |
What you see:
- Beautiful smooth S-shaped purple curve
- Two red control points pulling the curve in different directions
- Much smoother and more natural than quadratic
Memory hook: Cubic Bezier = two control points = professional smooth curves (used in icons, animations, Adobe Illustrator paths)
4. All Important Curve Commands & Tricks
A. Quadratic CurveTo (1 control point)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.quadraticCurveTo(controlX, controlY, endX, endY); |
B. Bezier CurveTo (2 control points)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endX, endY); |
C. Arc as Curve (for rounded corners)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.arcTo(x1, y1, x2, y2, radius); // connects current point to (x2,y2) with rounded corner |
D. Combine curves with lines
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.quadraticCurveTo(300, 50, 400, 100); ctx.bezierCurveTo(500, 200, 600, 50, 700, 150); ctx.strokeStyle = '#27ae60'; ctx.lineWidth = 12; ctx.stroke(); |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always beginPath() before starting curves — prevents connecting to previous drawing
- Angles in arc() are radians — full circle = Math.PI * 2
- Common mistake #1: Forget stroke() or fill() after curve → invisible!
- Common mistake #2: Wrong control point positions → ugly / sharp bends
- Pro tip: Use online Bezier curve editors (like bezier.world or yqnn.github.io) → play with control points → copy the numbers to code
- Pro tip 2: ctx.save() / ctx.restore() when experimenting with colors / line styles
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.save(); ctx.lineWidth = 20; ctx.strokeStyle = 'red'; // draw thick curve ctx.restore(); |
Understood Canvas Curves fully now? Curves (quadratic + cubic Bezier + arc) are what make canvas drawings look professional, organic, and beautiful — icons, buttons, animations, characters, waves, loaders… almost everything good uses them.
Tell me what you want next — we can build on this:
- Full heart shape using Bezier curves?
- Smooth wave / sine curve animation?
- Custom rounded button generator?
- Curve-based loading spinner?
- Or 15-question Canvas curves quiz?
Just say — we keep going step by step together! 🚀
