Canvas Methods for Drawing Lines

Syntax

canvas1.beginPath();
canvas1.moveTo( 0, 0 );
canvas1.lineTo( 120, 150 );
canvas1.stroke();

Methods

• beginPath(): This method defines the new path.
• moveTo(x,y): This method is used to define the starting point.
• lineTo(x,y): This method is used to define the endpoint. Here, x specifies the x-axis coordinates(horizontal) and y specifies the y-axis coordinates(verticle) of the line’s endpoint.
• stroke(): This method is used to draw the line.

In this article, we will learn how to make lines in different styles on Canvas in HTML. There are various methods used to draw a line on canvas like beginPath(), moveTo(), lineTo(), and stroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line with the help of JavaScript.