A number of attributes can be used in drawing a line.
Two examples are shown in the following code.
context.strokeStyle = "red";
context.lineWidth = 20;
Attributes that can be used for lines include
| Attribute | Meaning |
|---|---|
| Colors | Fill your line with any of thousands of color variations. |
| Gradients | Vary the colors within a line. |
| Patterns | Fill your line with a repeated pattern. |
| Transparency | Let another image or background show through your line. |
| Shadows | Generate shadows below, above, or to the side of your line. |
| Clipping | Set a mask that will remove designated portions of your line. |
| Width | Set the width of your line. |
| Caps | Control the shape of the caps on the ends of your line. |
| Joins | Set a mask that will remove designated portions of your object. |
There are three types of line caps:
| Line Caps | Meaning |
|---|---|
| butt | The line is square ended without adding any length. |
| square | The line is square ended with added length. |
| round | The line is round ended with added length. |
There are three types of line joins:
| Line Joins | Meaning |
|---|---|
| miter | The lines are joined with a pointed tip. |
| bevel | The lines are joined with a squared tip. |
| round | The lines are joined with a rounded tip. |