Which methods are used to draw a straight line on a Canvas ?
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.
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.
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.
Example: Now create an HTML file and add the following code to draw a straight line on the canvas.
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 excess 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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.