Chapter 36: Canvas Lines
1. What are “Canvas Lines” actually?
Canvas Lines means using JavaScript on the <canvas> element to draw straight lines, connected line segments, dashed lines, thick lines, curved lines, arrows, outlines, and paths — basically anything that involves drawing from one point to another.
Lines are the foundation of almost every canvas drawing:
- Charts & graphs → lines connect data points
- Diagrams & flowcharts → lines show connections
- Games → player movement, bullets, borders
- UI elements → borders, separators, loading bars
- Freehand drawing apps → mouse movement = lines
- Arrows & pointers → very common in tutorials & infographics
All lines are drawn using the path system:
- beginPath() — start a new drawing path
- moveTo(x, y) — move the pen to starting point (no line drawn yet)
- lineTo(x, y) — draw a straight line from current position to this point
- stroke() — actually draw the lines you created
Without stroke(), nothing appears — stroke() is like pressing the pen down.
2. Your Very First Canvas Line – Single Straight Line (Copy-Paste & Run)
Create canvas-line-hello.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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Lines – First Line</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 Lines – Let's Draw!</h1> <canvas id="lineCanvas" width="600" height="400"></canvas> <script> const canvas = document.getElementById('lineCanvas'); const ctx = canvas.getContext('2d'); // Background (optional – makes it look nice) ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === Draw a single thick blue line from left to right === ctx.beginPath(); // Start a new path ctx.moveTo(50, 200); // Start point (x=50, y=200) ctx.lineTo(550, 200); // End point (x=550, y=200) ctx.strokeStyle = '#3498db'; // Line color ctx.lineWidth = 12; // Thickness ctx.lineCap = 'round'; // End style: round, butt, square ctx.stroke(); // Actually draw the line! // Label the line ctx.font = '24px Arial'; ctx.fillStyle = '#2c3e50'; ctx.fillText('Simple horizontal line', 300, 250); </script> </body> </html> |
What you see:
- Thick blue horizontal line across the middle
- Rounded ends (because lineCap = ’round’)
- Text label below
3. All Important Line Properties (With Examples)
A. Basic Line Styles
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Different thicknesses & colors ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(500, 100); ctx.strokeStyle = '#e74c3c'; // red ctx.lineWidth = 4; ctx.stroke(); ctx.beginPath(); ctx.moveTo(100, 150); ctx.lineTo(500, 150); ctx.strokeStyle = '#27ae60'; // green ctx.lineWidth = 15; ctx.lineCap = 'square'; // flat square ends ctx.stroke(); |
B. Connected Lines (Polyline / Zigzag)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ctx.beginPath(); ctx.moveTo(50, 300); ctx.lineTo(150, 100); ctx.lineTo(250, 300); ctx.lineTo(350, 100); ctx.lineTo(450, 300); ctx.strokeStyle = '#8e44ad'; ctx.lineWidth = 10; ctx.lineJoin = 'round'; // corners look smooth ctx.stroke(); |
C. Dashed / Dotted Lines (strokeDasharray)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(550, 50); ctx.setLineDash([10, 5]); // 10px dash, 5px gap, repeat ctx.lineDashOffset = 0; ctx.strokeStyle = '#f39c12'; ctx.lineWidth = 8; ctx.stroke(); // Reset to solid line ctx.setLineDash([]); // empty = solid |
D. Arrow Lines (Very Common – Manual Arrowhead)
JavaScript
|
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 |
function drawArrow(fromX, fromY, toX, toY) { const headlen = 20; const dx = toX - fromX; const dy = toY - fromY; const angle = Math.atan2(dy, dx); ctx.beginPath(); ctx.moveTo(fromX, fromY); ctx.lineTo(toX, toY); ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6)); ctx.moveTo(toX, toY); ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6)); ctx.strokeStyle = '#2ecc71'; ctx.lineWidth = 6; ctx.stroke(); } drawArrow(100, 100, 500, 300); |
→ Nice green arrow from (100,100) to (500,300)
4. Teacher’s Quick Tips (Hyderabad Student Style)
- Always beginPath() before new line — prevents connecting to previous drawing
- stroke() is what actually draws — fill() is for closed shapes only
- Use lineCap = ’round’ for soft ends (arrows, loading bars)
- Use lineJoin = ’round’ for smooth corners in polylines
- Common mistake #1: Forget stroke() → nothing appears!
- Common mistake #2: Draw lines without beginPath() → messy connections
- Pro tip: Save & restore state when changing line styles
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.save(); ctx.lineWidth = 20; ctx.strokeStyle = 'red'; // draw thick red line ctx.restore(); // back to previous width/color |
Understood Canvas Lines fully now? This is the foundation of almost every canvas project — lines are everywhere (charts, borders, arrows, paths, animations).
Tell me what you want next — we can build on this:
- Full arrowhead library with different styles?
- Mouse drawing app (freehand lines)?
- Animated growing line / progress bar?
- Line chart with data points?
- Or 15-question Canvas lines quiz?
Just say — we keep going step by step together! 🚀
