The canvas element and its context provide a set of methods to draw shapes using paths.
Paths are basically a set of individual lines to form a shape.
The following table shows the methods that are available for drawing basic paths.
| Name | Description | Returns |
|---|---|---|
| beginPath() | Begins a new path | void |
| closePath() | close the existing path by drawing a line from the end of the last line to the initial coordinates | void |
| fill() | Fills the shape described by the sub-paths | void |
| isPointInPath(x, y) | Returns true if the specified point is contained by the shape described by the current path | boolean |
| lineTo(x, y) | Draws a sub-path to the specified coordinates | void |
| moveTo(x, y) | Moves to the specified coordinates without drawing a sub-path | void |
| rect(x, y, w, h) | Draws a rectangle whose top-left corners is at (x, y) with width w and height h. | void |
| stroke() | Draws the outline of the shape as described by the sub-paths | void |
The basic sequence for drawing a path is as follows: