Stroke Settings

Stroke color

Stoke color can be set in several ways:

  • using a parameter: stroke(colorSettings, otherParams...)
  • as a String: 'thickness colorSetting'
  • in an Object:
     {
        color: value,
        opacity: value,
        otherParams ...
    
}

Read more about color settings in Fill Settings article.

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

Image fill not supported.

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

JsFiddle Playground

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

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

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

Stroke 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 ...
    
}

JsFiddle Playground

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 with 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.

JsFiddle Playground

.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 ...
    
}

JsFiddle Playground

.stroke({
  color: 'blue',
  thickness: 15,
  lineJoin: 'bevel',
  lineCap: 'round'
})
You are looking at an outdated 7.10.0 version of this document. Switch to the 8.0.1 version to see the up to date information.