Line Styles
Customize the appearance of any stroke by adjusting properties such as width, end caps, and join styles.
The 2D rendering context includes several properties and methods to modify line styles:
| Property | Description |
|---|---|
lineWidth |
Sets the thickness of the line (pixels). The default value is 1.0. |
lineCap |
Determines the shape of the ends of a line (butt, round, or square). |
lineJoin |
Determines how two connected segments are joined (miter, round, or bevel). |
miterLimit |
Sets the maximum limit for miter joins. |
Line Cap and Join Example
This example demonstrates how different lineCap and lineJoin settings affect the rendering of lines and corners:
Dashed Lines
You can create dash and dot patterns using the setLineDash() method:
The next lesson explains how to implement shadows to add depth to your drawings.