Stroke Settings

Overview
Color
Thickness
Dash
Join and Cap

Overview

Stroke settings define how a path (line), or a border of a shape is drawn. All Shapes and Paths have a stroke method.

Color

Stroke color can be set in several ways:

using a parameter: stroke(colorSettings, otherParams...)
as a string: 'thickness colorSetting'

using an object:

 {
    color: value,
    opacity: value,
    ...
 }

Stroke color is set similar to fill. The setting supports fill with:

Image and pattern fill are not supported for a stroke.

For example, that's how you do stroke color fill:

// Solid color strok
.stroke('5 orange .7')

// Linear gradient stroke
.stroke(['red', 'blue'], 15)

// Radial gradient stroke
.stroke({
  keys: ['.1 red', 'white'],
  cx: .5,
  cy: .5,
  fx: .3,
  fy: .4
}, 4)

Playground

Thickness

Stroke thickness can be set in several ways:

using a parameter: stroke(colorSettings, thickness, otherParams...)
as a string: 'thickness colorSetting'
as an object:
```
{
  thickness: value,
  ...
}
```

Playground

Dash

Dash settings can be set in two ways:

using a parameter: stroke(colorSettings, thickness, dashSetting, otherParams...)
as an object:
```
{
  dash: value,
  ...
}
```

Dash settings are set by a string with numbers separated by spaces. This string is used as the dash pattern. For example, if string value is 5 - the resulting pattern will be 5 5 5 5 5 ..., and if string value is 5 5 10, that will result in 5 5 10 5 5 10 5 5 10 ....

Every number in an odd position is a dash length, and every number in an even position is a space length.

.stroke('yellow', 5, '5 5 10')

Playground

Join and Cap

Join and cap settings are set in two ways:

using a parameter: stroke(colorSettings, thickness, dashSetting, lineJoin, lineCap)

as an object:

{
  lineJoin: value,
  lineCap: value,
  ...
}

Sample cap and join settings:

.stroke({
  color: 'blue',
  thickness: 15,
  lineJoin: 'bevel',
  lineCap: 'round'
})

Playground