How to create lines with HTML canvas

━━━ Lines

To draw a line with canvas, there are methods used.

• beginPath(): This method is to start a new drawing path
• moveTo(x, y): This method is to specify the starting point of the line.
• lineTo(x, y): This method is to specify the end point of the line
• stroke(): This method is to add a stroke depending on the strokeStyle to the line
• setLineDash([dash length, gap length]): This method is to create dash or dotted line with gap in between. -``

Diagonal line

Straight line

Vertical line

Dashed line

Dotted line

Parrallel lines

Curved lines

Zigzag

Conclusion

I hope you have been able to see different lines using HTML canvas. Follow me to see more articles.

Comments

[jwrightecs]

why are these screenshots of codepens and not embedded pens?

[Adijat Motunrayo Adeneye]

Is there a way to do that ? I would love to know about it. Thanks for the feedback