Line style settings apply to paths, and the stroke of shapes and text.
lineWidth : Basics.Float -> Canvas.Settings.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 -> Canvas.Settings.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 of end points for line drawn.
ButtCap
RoundCap
SquareCap
lineJoin : LineJoin -> Canvas.Settings.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
Determines how two connecting segments with non-zero lengths in a shape are joined together.
Round
Bevel
Miter
You can see examples and pictures on the MDN docs
lineDash : List Basics.Float -> Canvas.Settings.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
[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 : Basics.Float -> Canvas.Settings.Setting
Specify the line dash pattern offset or "phase".
There are visual examples and more information in the MDN docs
miterLimit : Basics.Float -> Canvas.Settings.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