HTML Canvas Shapes

HTML Canvas Shapes facilitate different shapes, i.e., rectangles, triangles, lines, arcs, and curves to draw on the HTML Canvas. 

For instance, to draw the line in the Canvas, the path will be used that implements the beginPath() method. Setting the path's starting point is achieved with moveTo(), while lineTo() establishes the endpoint. To render the line, we use the stroke() method, with the default stroke color being black.

Syntax

context.beginPath();
context.moveTo();
context.lineTo();
context.stroke();

Methods

• beginPath(): This method is used to define the new path.
• moveTo(x,y): This method defines the starting point.
• lineTo(x,y): This method defines the endpoint. Here, x specifies the x-axis coordinates and y specifies the y-axis coordinates of the line's endpoint.
• stroke(): This method is used to draw the line. The stroke color is black which is a default property.

Example: In this example, we will implement a code to draw canvas shapes with default property.

Output:

Example: In this example, we will implement a code to draw canvas shapes with the strokeStyle property.

Output: