Open In App

Which methods are used to draw a straight line on a Canvas ?

Improve
Improve
Like Article
Like
Save
Share
Report

HTML provides a very interesting element known as <canvas>, it is only a container that is used to draw graphics on web pages, rest of the work is done with JavaScript. 

There are several methods in JavaScript to draw shapes on the canvas. In this article, we will see how we can draw a line on a canvas and the essential methods used to draw a straight line.

There are the following methods to draw a straight line on the canvas.

beginPath(): This method is used to begin the path that we are going to draw. It does not take any arguments.

moveTo(): This method takes two arguments which will be the starting point of any path. The method will start the shape from that particular point.  We can later change the starting point by changing the values of its arguments.

Syntax : 

moveTo(x , y)

where,

  • x : x-coordinate of the point.
  • y : y-coordinate of the point.

Example:

 moveTo(10 , 30);

lineTo(): This method will also take two values and it will add the starting point to the points that it holds. The code represents a path from one point to another point.

Syntax :

lineTo(x , y)

where,

  • x : x-coordinate of the point.
  • y : y-coordinate of the point.

Example:

moveTo(10 , 30); 
lineTo(40 , 100);

stroke(): This method will stroke the given path and make it visible, this method does not take any arguments.

All the methods that are listed above will be required to draw a line on the canvas. Note that these are only some methods that will be used to draw lines but there are several other methods available in JavaScript to work with canvas.

Example: Now create an HTML file and add the following code to draw a straight line on the canvas.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>
 
<body>
    <!-- Create a canvas giving its size -->
    <canvas id="canvas1" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas1');
 
        // Use the if condition in case any browser
        // does not support canvas
        if (canvas.getContext) {
            var context = canvas.getContext('2d');
 
            // Begin the path
            context.beginPath();
 
            // Starting point
            context.moveTo(5, 52);
 
            // End point
            context.lineTo(325, 55);
 
            // Stroke will make the line visible
            context.stroke();
        }
    </script>
</body>
</html>


Output:

output

When working with canvas we have to give the size so that we can draw shapes inside it. Note that if the values of shapes exceeds the canvas boundary then the shape will be limited to that border and can’t go through, although it won’t give any error. So this is how we can draw lines on the canvas.

you can also change the styling of the line using the methods like:

  • strokeStyle: changes the color of the line. It accepts color values in rgb, hex, hsl or the predefined name.
  • lineWidth:  adds width to the line. It accepts a number.
  • lineCap: the shape of the line end points. It accepts any of the following “butt | round | square”.


Last Updated : 12 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads