Color Lines

How to draw lines in html

In this topic, we described about the below sections —

We can draw a straight line on canvas. The most important techniques utilized this purpose are lineTo( ), moveTo( ), and stroke( ) etc.

We require the following methods to draw lines on the canvas −

Method	Description
beginPath()	This technique resets the present path.
moveTo(x, y)	This technique is used to describe the location of drawing cursor on the canvas.
lineTo(x, y)	This technique is used to describe the coordinates of the lines end point.
closePath()	This technique marks the present subpath as closed and starts a new subpath with a point the similar as the start and end of the recently closed subpath.
fill()	This technique fills the subpaths with the present fill style.
stroke()	This technique strokes the subpaths with the present stroke style.

Example —

    Your browser does not support the HTML5 canvas tag.    

Output-

Line properties

Below are the list of properties used to style the lines —

Property	Description
lineWidth [ = value ]	This property returns the existing line width and can be arranged, to alter the line width.
lineCap [ = value ]	This property returns the existing line cap style and can be organized, to alter the line cap style. The possible line cap styles are butt, round, and square.
lineJoin [ = value ]	This property returns the present line join style and can be organized, to alter the line join style. The possible line join styles are bevel, round, and miter.
miterLimit [ = value ]	This property returns the existing miter limit ratio and can be prepared, to alter the miter limit ratio.

linewidth()

The lineWidth property provides the width (in pixels) of lines. The property value is a positive number (by default value 1).On setting negative, zero, NaN values, the new value gets ignored and the old value remains unchanged.

Example —

    Your browser does not support the HTML5 canvas tag.    

Output —

lineCap()

lineCap property is used to sets or gets the existing line cap style. Line cap property contains three cap styles. They are —

• butt — Default. A flat edge is placed perpendicular to every end of the line with no cap added.
• round — A rounded, or semi-circular end cap is added to every end of the line.
• square — A square end cap is added to every end of the line.

Example: —

   
The three different line caps:
 Your browser does not support the HTML5 canvas tag.    

Output —

The three different line caps:&

Your browser does not support the HTML5 canvas tag.

lineJoin()

When two lines join, lineJoin property is used to set or get the type of corner that is established. Line join contains three values and they are —

• bevel — When establishing a bevelled corner, a filled triangle attaches the two lines that are joined.
• round — Lines join with a rounded corner.
• square — Default. Lines join with a smoothly mitered corner.

Example —

    Your browser does not support the HTML5 canvas tag.    

Output-

miterLimit()

The miterLimit property returns or sets the highest miter length.

The miter length is the space between the inner and the outer corners of two lines where they met.

Tip: The miterLimit property operates only if the lineJoin attribute is «miter».

Example —

    Your browser does not support the HTML5 canvas tag.    

Output —

Colouring Lines

We can use strokeStyle property to color the lines. The default color is black.

Syntax —

Example-

       Your browser does not support the HTML5 canvas tag.    

Output —

Browser Support

The following browsers with versions in the table indicates the initial browser version that completely supports the drawline( ) method —

Method	Chrome	Edge	Firefox	Safari	Opera
drawline( )	Yes	9.0 and above	Yes	Yes	Yes

Источник

Draw a Line in a div – HTML

HTML allocates the basic web page structure in a website, and different types of styling can be applied by utilizing CSS. It also has various styling properties used for drawing different shapes, including circles, squares, rectangles, lines, ovals, and many more. Furthermore, a line is one that is the most commonly utilized element that can be added in any form including vertically as well as horizontally in a container.

This post will specifically discuss the following methods:

Method 1: How to Draw a Line in a div Using the “border-bottom” Property?

To draw a line in a div, you can use the “border-bottom” property, which hides all sides except the border’s bottom.

To apply this approach, check out the given steps.

Step 1: Create a div Container

First, create a div container with the help of the “ ” tag and insert an “id” attribute with a name according to your choice.

Step 2: Add Heading

Next, add a heading by utilizing any heading tag from “ ” to “ ”. For instance, we have used the “ ” tag for adding the level one heading.

Step 3: Create Another div Container

Now, create another div container by following the same procedure:

Step 4: Style “main-div” Container

Access the div container by using the id selector “#” and the name of the “id”. Then, apply the CSS properties for further styling:

• “color” property is utilized for specifying the color of the selected element.
• “text-align” property aligns the added text in the “center”.
• “margin” defines space for the element’s outside.

Step 5: Style “line-div” Container

Then, access the second div container and apply the following CSS property to get the desired output:

According to the above code snippet:

• Set the “width” value for allocating the width of the element content area.
• “height” property defines the element size vertically.
• “position” specifies the type of positioning method utilized for an element
• Last but not least, “border-bottom” defines the width, line style, and color of the bottom border of a box.

It can be observed that we have successfully added a line at the bottom of the div:

Method 2: How to Draw a Line in a div Using the “

---

” Tag?

In HTML, the “ ” tag represents a horizontal rule that defines a thematic break in the page. More specifically, this tag can be utilized for drawing a line in a div without using the CSS properties.

To draw a line in a div container using the

---

tag, try out the instructions below.

Step 1: Create a Container

Initially, create a div container with the help of the “ ” tag. Also, add a class with a name inside the “” opening. Then, add a heading by using the “ ” tag.

Step 2: Insert “

---

” Tag to Draw a Line

After that, insert the paragraph tag “ ” and add the “ ” tag inside the

tag. Moreover, you can also specify the color inside the hr tag:

Step 3: Apply CSS Properties to “line” Container

Then, access the “line” container using the dot selector and style it accordingly:

Here, we have applied the “height”, “width” and “margin” properties to the selected div.

It can be observed that a line has been drawn using the

---

tag in HTML.

Conclusion

To draw a line in a div, HTML users can either utilize the “ ” tag or the “bottom-border” CSS property. In the first approach, the CSS property “bottom-border” hides all sides of the border except the bottom of the border. For the second approach, you must specify only the “

---

” tag for creating a horizontal line without using CSS properties. This post has demonstrated how to draw a line in a div using two different methods.

Источник