linsyking/elm-canvas/3.1.0

NOTE: the latest version is 4.4.0

Canvas.Settings.Line

Styling lines

Line style settings apply to paths, and the stroke of shapes and text.

lineWidth : Float -> Setting

Specify the thickness of lines in space units. When passing zero, negative, Infinity and NaN values are ignored. More information and examples in the MDN docs

lineCap : LineCap -> Setting

Determines how the end points of every line are drawn. See LineCap for the possible types. By default ButtCap is used. See the MDN docs for examples.

type LineCap
= ButtCap
| RoundCap
| SquareCap

Type of end points for line drawn.

  • ButtCap
    • The ends of lines are squared off at the endpoints.
  • RoundCap
    • The ends of lines are rounded.
  • SquareCap
    • The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
lineJoin : LineJoin -> Setting

Specify how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped). See the type LineJoin.

By default this property is set to MiterJoin. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

More information and examples in the MDN docs

= BevelJoin
| RoundJoin
| MiterJoin

Determines how two connecting segments with non-zero lengths in a shape are joined together.

  • Round
    • Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
  • Bevel
    • Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
  • Miter
    • Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the miterLimit property.

You can see examples and pictures on the MDN docs

lineDash : List Float -> Setting

Specify the line dash pattern used when stroking lines, using a list of values which specify alternating lengths of lines and gaps which describe the pattern.

lineDash segments
  • segments
    • A list of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the list is odd, the elements of the list get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. If the list is empty, the line dash list is clear and line strokes are solid.

You can see examples and more information in the MDN docs

lineDashOffset : Float -> Setting

Specify the line dash pattern offset or "phase".

There are visual examples and more information in the MDN docs

miterLimit : Float -> Setting

Specify the miter limit ratio in space units. When passing zero, negative, Infinity and NaN values are ignored. It defaults to 10.

More information and live example in the MDN docs