Skip to main content

strokeWidth

strokeWidth(width: number) => void

Sets the width of lines and shape outlines.

Parameters​

  • width: Line thickness in pixels. Values ≤ 0 set to minimum thickness (EPSILON).

Example​

// Basic usage
K.strokeWidth(5)
K.line(10, 10, 90, 90)

// In JSX component
const draw = (K: KlintContext) => {
  K.strokeWidth(3)
  K.circle(K.width/2, K.height/2, 100)
}

return <Klint draw={draw} />

The 2D canvas don't understand stroke position, it will always be centered along the path. If you want to have stroke on the inside/outside of the shape, slightly change the size of the shape by +/- half the stroke thickness.

Notes​

  • Affects all subsequent stroke operations (lines, shape outlines, stroke text)
  • Use K.noStroke() to disable stroke completely instead of reducing it to 0
  • Default is 1 which represent a 1px thickness.