how to draw a line in html

Summary: in this tutorial, you'll acquire how to draw a line using the Canvas API.

Steps for drawing a line in JavaScript

To draw a line on a sail, yous use the following steps:

Get-go, create a new line by calling the beginPath() method.
Second, move the drawing cursor to the point (x,y) without drawing a line by calling the moveTo(x, y).
Finally, depict a line from the previous point to the point (x,y) past calling the lineTo(x,y) method.

Set the line stroke

If you want to stroke the line with the strokeStyle, you tin call the stroke() method afterwards calling the lineTo(x,y) method.

Set the line width

To set the width for a line, you use the lineWidth property of the 2D drawing context earlier calling stroke() method:

                          ctx.lineWidth = ten;

The lineTo(x,y) method

The lineTo(x,y ) method accepts both positive and negative arguments.

If thex is positive, the lineTo(x,y) method draws the line from the starting betoken to the right. Otherwise, it draws the line from the starting point to the left.

If they is positive, the lineTo(x,y) method draws the line from the starting point downwards the y-axis. Otherwise, it draws the line from the starting point up to the y-axis.

Drawing a line example

The following shows the index.html file that contains a canvas element:

                                          <!DOCTYPE                  html>                <html                  lang="en">                <head>                <meta                  charset="UTF-viii">                <meta                  proper name="viewport"                  content="width=device-width, initial-scale=1.0">                <title>JavaScript - Drawing a Line</title>                <link                  rel="stylesheet"                  href="css/manner.css">                </head>                <body>                <h1>JavaScript - Drawing a Line</h1>                <canvas                  id="canvas"                  height="400"                  width="500">                </sheet>                <script                  src="js/app.js">                </script>                </trunk>                </html>                          
                          Code linguistic communication:              HTML, XML              (              xml              )

And this app.js contains that draws a line with the color ruby-red, 5-pixel width from the point (100, 100) to (300, 100):

                                                            role                  draw()                {                const                canvass =                document.querySelector('#sail');                if                (!canvas.getContext) {                return;     }                const                ctx = canvas.getContext('2nd');                // fix line stroke and line width                ctx.strokeStyle =                'red';     ctx.lineWidth =                5;                // draw a blood-red line                ctx.beginPath();     ctx.moveTo(100,                100);     ctx.lineTo(300,                100);     ctx.stroke();  } draw();            
                          Code language:              JavaScript              (              javascript              )

The following shows the output:

Here is the link that shows the canvass with the line.

Develop a resuable drawLine() function

The following drawLine() function draws a line from one signal to another with a specified stroke and width:

                                                            function                  drawLine(ctx, begin, finish, stroke =                    'black', width =                    1                  )                {                if                (stroke) {         ctx.strokeStyle = stroke;     }                if                (width) {         ctx.lineWidth = width;     }      ctx.beginPath();     ctx.moveTo(...begin);     ctx.lineTo(...cease);     ctx.stroke(); }                          
                          Code language:              JavaScript              (              javascript              )

To draw a line from (100,100) to (100,300) with the line color light-green and line width five pixels, you can telephone call the drawLine() function as follows:

                                          const                sheet =                document.querySelector('#canvass');                if                (canvas.getContext) {                const                ctx = sheet.getContext('2d');     drawLine(ctx, [100,                100], [100,                300],                'green',                5); }                          
                          Lawmaking language:              JavaScript              (              javascript              )