How to draw a line using javascript

The drawing line is an easy and simple method using the canvas function on a web page using javascript.

Canvas tag uses to draw the line with different javascript properties and methods. The javascript sets the line's width, structure, display, and color.

JavaScript line drawing instructions

You can create a line on a canvas by using the procedures below:

• Start by invoking the beginPath() function to generate a new line.
• Second, call the moveTo function to move the drawing cursor to the position (x,y) without drawing a line (x, y).
• Finally, call the lineTo(x,y) method to draw a line from the previous point to that location.

Syntax

The following syntax shows the drawn line in the canvas.

Set the canvas variable to draw the line. Use the line width property of the 2D drawing context to set the line's width.

• Set the line color.

• Begin the drawn line using the JavaScript method.

• Set the stroke line. After using the lineTo(x,y) function, you may use the stroke() method to add a stroke to the line using the stroke style.

• Invoking the stroke() method

ct_var1.stroke();

Description

• Both positive and negative arguments can be passed to the lineTo(x,y) method.
• The lineTo(x,y) function draws the line from the beginning point to the right if x is positive. If not, it traces a line from the starting position to the left.
• The lineTo(x,y) method creates a line from the beginning point down the y-axis if the value of y is positive. In all other cases, it traces a line from the origin to the y-axis.

Examples

The examples display single and multiple lines with the angle and style.

Example 1: the following example shows the basic horizontal line on the canvas. The canvas shows light grey color, and the line displays in black color.

Output:

The image shows a straight black line on the canvas.

Example 2: the following example shows the basic sliding line on the canvas. The canvas shows with grey color, and the line displays a yellow color.

Output:

The image shows the black sliding on the canvas.

Example 3: the following example shows the basic vertical line on the canvas. The canvas shows grey color, and the line displays an orange color.

Output

The image shows the vertical line on the canvas.

Example 4: the following example shows various lines with different colors and styles on the canvas. The canvas shows grey color, and the line displays in multiple colors. We can see different sizes and different positions of the lines on the canvas.

Output

The image shows the multiple lines on the canvas.

Example 5: the following example shows the basic line on the canvas with the arguments in the function. The canvas shows grey color, and the line displays an orange color. We can use single or multiple functions with the input argument. Here, the function uses the stroke line's positive and negative start and end positions.

Output

The image shows a simple single line on the canvas.

Example 6: the following example shows various lines on the canvas with the arguments in the function. The canvas shows multiple colors and different sizes, and different format lines. Here, the input argument of the function uses the same start point and different co-ordination points to set the multiple lines together.

Output

The image shows the multiple lines on the canvas.

Example 7: the following example shows given lines on the canvas with the arguments in the function. The canvas shows multiple colors and different sizes, and different format lines. We can use different widths with the same line start point on the canvas. The different line co-ordination used on the page for the line position.

Output

The image shows multiple lines with different widths and co-ordination on the canvas.

Conclusion

The draw line using javascript is a simple and easy method for the users and developers. The canvas uses to get the platform to draw a line in different sizes, shapes, and positions. We can show different sizes and coordinate lines with different widths to create particular shapes.