How To Draw A Line On Website

Summary: in this tutorial, y'all'll learn how to draw a line using the Sheet API.

Steps for drawing a line in JavaScript

To draw a line on a sheet, you utilize the following steps:

First, create a new line by calling the beginPath() method.
Second, move the drawing cursor to the point (ten,y) without drawing a line by calling the moveTo(x, y).
Finally, describe a line from the previous point to the indicate (x,y) by calling the lineTo(x,y) method.

Set the line stroke

If y'all want to stroke the line with the strokeStyle, you can phone call the stroke() method after calling the lineTo(ten,y) method.

Set the line width

To gear up the width for a line, you use the lineWidth property of the 2d drawing context before calling stroke() method:

                          ctx.lineWidth = 10;

The lineTo(10,y) method

The lineTo(ten,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, information technology draws the line from the starting signal to the left.

If they is positive, the lineTo(x,y) method draws the line from the starting point down the y-centrality. Otherwise, it draws the line from the starting indicate upwardly to the y-centrality.

Drawing a line case

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

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

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

                                                            function                  depict()                {                const                canvas =                document.querySelector('#sheet');                if                (!canvas.getContext) {                render;     }                const                ctx = canvass.getContext('2d');                // fix line stroke and line width                ctx.strokeStyle =                'red';     ctx.lineWidth =                5;                // draw a red line                ctx.beginPath();     ctx.moveTo(100,                100);     ctx.lineTo(300,                100);     ctx.stroke();  } depict();            
                          Lawmaking language:              JavaScript              (              javascript              )

The following shows the output:

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

Develop a resuable drawLine() part

The following drawLine() function draws a line from one point to some other with a specified stroke and width:

                                                            function                  drawLine(ctx, begin, stop, stroke =                    'black', width =                    ane                  )                {                if                (stroke) {         ctx.strokeStyle = stroke;     }                if                (width) {         ctx.lineWidth = width;     }      ctx.beginPath();     ctx.moveTo(...brainstorm);     ctx.lineTo(...end);     ctx.stroke(); }                          
                          Code linguistic communication:              JavaScript              (              javascript              )

To draw a line from (100,100) to (100,300) with the line color green and line width 5 pixels, y'all tin can call the drawLine() office every bit follows:

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