Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

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