To draw a line, we can use the beginPath(), moveTo(), lineTo(), and stroke() functions.
Functions:
beginPath() - starts dots connection.
closePath() - causes the point of the pen to move back to the start of the current sub-path (last moveTo).
moveTo(x, y) - moves the brush to the coordinates specified by x and y.
lineTo(x, y) - connects the last point in the path to the x, y coordinates with a straight line (but does not actually draw it).
stroke() - draws the shape by stroking its outline. The stroke is according to the strokeStyle property. If strokeStyle is not specified, black line is drawn.
setLineDash(segments) - sets the current line dash pattern.
lineJoinlineCap
Properties:
strokeStyle - specifies the color or style to use for the lines around shapes. The default is #000 (black).
lineWidth - specifies the stroke width.
lineJoin - defines how the point is drawn where two lines are connected. Can be miter (default), bevel, round.
lineCap - lines can have one of three cap styles: butt (the default), round, or square.
miterLimit - defines the miter limit length. It lets you control how thick the line connection becomes.
lineDashOffset - specifies where to start a dash array on a line.
Controlling stroke:
You can control the line joining with the property ctx.lineJoin which can be round, miter, and bevel. If you use miter (pointy corners) you can control how far the mitering sticks out on sharp corners by setting the value of ctx.miterLimit to the number of pixels that it should not go past.
You can also control the line ends with ctx.lineCap property which can have one of butt ,round, and square. Butt has a flat end that stops at the coordinates of the start and end of the line. Square adds half the line width to the start and end of the line.
