Canvas Paths
Paths are sequences of connected points. Start with beginPath(), define points with moveTo() and lineTo(), then render with stroke() or fill().
HTML
Beginner
5 min read
Drawing Paths and Lines
Example
const ctx = canvas.getContext("2d");
// Draw a triangle
ctx.beginPath();
ctx.moveTo(150, 20); // Starting point
ctx.lineTo(280, 180); // Line to
ctx.lineTo(20, 180); // Another line
ctx.closePath(); // Close back to start
ctx.fillStyle = "#ffc107";
ctx.fill();
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
ctx.stroke(); Pro Tip
Always call beginPath() before starting a new shape — without it, new paths connect to the previous one.