12.7 Drawing Lines and Paths

In the previous section, you learned how to draw curved lines with the arc method. It’s also important to learn how to draw straight lines. Sometimes, you’ll need to display straight lines by themselves. For more complicated drawings, you’ll need to display straight lines that connect to themselves and to curved lines. In this section, you’ll learn how to draw standalone lines, as well as lines that connect to other lines to form paths.

Drawing a Line Segment

To draw a standalone line segment, you first need to move to the position where you want to start drawing the line. You do that by calling the context object’s moveTo method with x and y argument values for the starting position. Here’s the syntax:

context ...

Get Web Programming with HTML5, CSS, and JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.