Drawing Lines and Paths

Drawing paths on a canvas involves a sequence of method calls that control how and where lines appear. You start by creating a new path using the beginPath() method. The moveTo(x, y) method moves the virtual pen to a specific coordinate without drawing anything, setting the starting point for your line. The lineTo(x, y) method then draws a straight line from the current pen position to the specified coordinates. To make the path visible, you use the stroke() method, which outlines the path with the current stroke style. By chaining multiple lineTo calls after a single moveTo, you can connect several lines to form more complex shapes or custom paths.

Managing the state of a path is essential for drawing different shapes and figures. The beginPath() method resets the current path, ensuring that new shapes do not unintentionally connect to previous ones. When you want to create a closed shape, such as a triangle, you can manually connect the last point back to the starting point using another lineTo, or use the closePath() method, which automatically draws a straight line from the current point to the start. This control over path state allows you to create both open and closed figures with precision.