Line

A line is determined by two points. Each point has X and Y coordinates.

Move the red and blue dots in the example below and notice how the coordinates of the corresponding points change in the code.

If you play with the controls in the "Config" area, you can change the stroke related attributes in the code.

For every change you make in the "Config" area, you will trigger changes in the "Code" area. The changes will be highlighted.

To better understand "stroke-linecap":

• Move "stroke-width" attribute to 15
• Notice what happens in the image area as you change the "stroke-linecap" attribute
• Try to overlap the red and blue dots
• Again, notice what happens in the image area as you change the "stroke-linecap" attribute