In this topic, we described about the Draw Path with detailed example.
A path contains a list of more or zero subpaths. The canvas paths allow us to draw custom models by using path. There are at least one or more than one points in every subpath that are linked by curves or straight lines.
To draw paths on the canvas we need the following methods -
|beginPath()||This method resets the existing path.|
|moveTo(x, y)||This method establishes a new subpath with the given point.|
|closePath()||This method marks the present subpath as closed and begins a new subpath with a point. i.e. It is same as the beginning of new subpath and ending of the newly closed subpath.|
|fill()||Fills the subpaths with the present fill style.|
|stroke()||Strokes the subpaths with the present stroke style.|
|arc(x, y, radius, startAngle, endAngle, anticlockwise)||Adds points to the subpath such that the arc described by the edge of the circle named by the arguments, starting at the provided start angle and ending at the provided end angle, going in the provided direction. The subpath is added to the path, linked to the previous point by a straight line.|
Example -The below example describes about how to draw a shape using above-mentioned methods.
The following browsers with versions in the table indicates the initial browser version that completely supports the path method -
|Beginpath( )||Yes||9.0 and above||Yes||Yes||Yes|