ADVERTISEMENT
Google AdSense Slot (headerLeaderboard)
Set your Publisher ID in src/config/ads.ts to display live ads.
SVG & HTML5 Canvas Tutorial• 7 min read
Canvas Drawing: beginPath, lineTo, arc & fill
Path life cycles, stroking, filling, and circular arcs
Unlike SVG elements, Canvas paths are ephemeral instructions. You call beginPath(), record path segments, and render them with stroke() or fill().
The Canvas Path Life Cycle
1
ctx.beginPath(): Starts a new path list, detaching from previously drawn strokes.2
ctx.moveTo(x, y): Repositions the virtual pen.3
ctx.lineTo(x, y): Adds a line segment.4
ctx.arc(cx, cy, radius, startAngle, endAngle): Adds a circular arc (angles in radians: 2 * Math.PI = full circle).5
ctx.stroke() or ctx.fill(): Actually paints the path pixels into the buffer.Drawing Circles and Polygons
// Draw a green filled circle
ctx.beginPath();
ctx.arc(200, 150, 50, 0, 2 * Math.PI); // Full circle
ctx.fillStyle = "#10b981";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = "#ffffff";
ctx.stroke();
// Draw a red stroked triangle
ctx.beginPath();
ctx.moveTo(350, 100);
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath(); // Connects back to (350, 100)
ctx.strokeStyle = "#ef4444";
ctx.stroke();beginPath() separates path operations cleanly.
ADVERTISEMENT
Google AdSense Slot (inContentBanner)
Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
What unit of measurement does `ctx.arc()` require for its startAngle and endAngle parameters?