Element stroke settings.

Line color settings

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 Elements Fill article.

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

  • Solid color,
  • Linear gradient,
  • Radial gradient.

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)

Line thickness

Line thickness can in several ways:

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

JsFiddle Playground

Line dash settings

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

Line join and cap

Line join and cap settins 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.3.0 version of this document. Switch to the 8.0.1 version to see the up to date information.