Stroke Settings

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,
otherParams ...
}
``````

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)

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

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,
otherParams ...
}
``````

Dash

Dash settings can be set in two ways:

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

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')
``````

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,
otherParams ...
}
``````

Sample cap and join settings:

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

You are looking at an outdated 7.13.1 version of this document. Switch to the 8.4.0 version to see the up to date information.