The x and y coordinates should be clear enough. In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life. For each arc, we start a new path by calling beginPath(). The two for loops are for looping through the rows and columns of arcs. It draws 12 different arcs all with different angles and fills. The following example is a little more complex than the ones we've seen above. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees. Note: Angles in the arc function are measured in radians, not degrees. Every time this method is called, the list is reset and we can start drawing new shapes. Internally, paths are stored as a list of sub-paths (lines, arcs, etc.) which together form a shape. The first step to create a path is to call the beginPath(). fill()ĭraws a solid shape by filling the path's content area. stroke()ĭraws the shape by stroking its outline. closePath()Īdds a straight line to the path, going to the start of the current sub-path. Methods to set different paths for objects. Once created, future drawing commands are directed into the path and used to build the path up. Here are the functions used to perform these steps: beginPath()Ĭreates a new path.

Once the path has been created, you can stroke or fill the path to render it.Then you use drawing commands to draw into the path.To make shapes using paths, we take some extra steps: A path, or even a subpath, can be closed. A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color.

Filling shapes geometry