HTML Canvas Lines

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(), andstroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line with the help of JavaScript.

Syntax

canvas1.lineTo(100, 150);

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.

Canvas Properties for Drawing Lines

Syntax

canvas2.lineWidth = 10;
canvas1.strokeStyle = "blue";
canvas2.lineCap = "round";

Properties

• lineWidth: In this property, we define the thickness or width of the line.
• strokeStyle: In this property, we define the style of the line.
• lineCap: In this property, we define the cap style that is applied on the top and bottom (start and end) of the line. There are three styles can be used butt, round, and square.

Using the lineTo() method and lineWidth property

The HTML Canvas 'lineTo' method delicately connects points, while the 'lineWidth' property subtly refines the strokes, resulting in a seamless fusion of precision and style on the digital canvas.

Example 1: In this example, we will draw a line with lineTo() and give the property lineWidth to define the width of the line.

Output:

Using the lineTo() method and lineCap property

The 'lineCap' property gives your drawings a neat and professional finish and The HTML Canvas 'lineTo' method delicately connects points.

Example 2: In this example, we will draw a line with lineTo() with properties.

Output: