Stroke

Line joins, caps, dash styles, and more

Strokes are used to draw the countur of a shape, curve, or text. It defines the visual edge of an object and can be customized in terms of color, thickness, style, and pattern.

./stroke-properties.jpg
./stroke-properties.jpg

The following settings are available for strokes:

  • Stroke width - Set the thickness of the stroke.
  • Render order
    • - Draw stroke on top of fill paint.
    • - Draw stroke below the fill paint.
  • Dash settings
    • - Set dash pattern.
    • - Set dash offset.
    • - Set the path length.
  • Cap style - The shape used to draw the end points of lines.
    • Butt - Create lines that are squared off at the endpoints.
    • Square - The ends of the lines are squared off by adding an extra box that's half the height of the stroke thickness.
    • Round - The ends of the lines are rounded.
  • Join style - The shape used to join two line segments where they meet.
    • Miter - Creates stroked lines with pointed corners.
    • Bevel - Creates stroked lines with squared corners.
    • Round - Creates stroked lines with round corners.
  • Miter limit - The limit at which Miter joins are transformed to Bevel joins.