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

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)

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

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

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

Sample cap and join settings:

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

JsFiddle Playground