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)

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

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

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

Playground

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