Now we just have to select which of the pair of arcs to use. This is what the sweep flag is for. One of the pairs of arcs will run clockwise from the start to finish point and the other runs anticlockwise. If the point on the left of the diagrams is the start point setting sweep to 0 selects the anticlockwise arcs:
Setting sweep to 1 selects the clockwise arcs:
You can now appreciate that by setting size and sweep together you can pick out just one of the possible arcs. For example:
path1=new Path2D("M50 50 A40 40 0 0 0 100 80");
draws an arc from 50,50 to 100,80 with radii equal to 40. As both the size and sweep flags are 0 this selects the small anticlockwise arc:
If you change the string to:
path1=new Path2D("M50 50 A40 40 0 1 1 100 80");
i.e. size and sweep set to 1, it draws the large clockwise arc:
This is a very flexible approach to drawing arcs, but it suffers from one major problem – how do you draw a complete circle or ellipse?
To specify a complete circle or ellipse the start and end point have to be the same and this doesn’t work. If you try:
path1=new Path2D("M100 80 A40 40 0 1 1 100 80");
nothing is drawn as there are an infinity of circles that pass through the same point – you need a second point to fix the position.
There are a number of solutions to this problem but no accepted best solution. One possibility is to specify the start and end points a small distance apart and then close the path. A possibly better solution is to draw two half circles or ellipses. For example:
This draws a perfect circle by drawing a semicircle from x,y to x+2r,y and then another from the current point back to x,y where r is the radius and x,y is the left edge of the circle.
If you want to use x,y as the center then the method is move to x-r,y, draw a semicircle radius r to x+r,y and then close the path by drawing a semicircle to x-r,y.
It is worth restating that all of these commands have relative versions corresponding to the same command letter but in lower case.
In book but not in this extract
Bezier and String Paths
Creating Bezier Paths
Using Multiple Paths
Drawing Without Paths
Summary
The fundamental way to draw on a canvas object is to define a path – an outline of a shape.
Once you have a path you can use stroke, which draws a line along the path, or fill which fills the path with a solid color or pattern.
You can avoid creating a path object by using the default Path object associated with the canvas. In most cases it is better to define path objects as these are reusable.
The basic path creation methods are rect, arc, ellipse and two types of Bezier curve.
You can also use the SVG path command which has many advantages. It is more like a mini-language for describing shapes.
In many cases it is easier to use an application such as InkScape to draw paths and then transfer them to your program using an SVG path string.
There are also a few methods that draw directly to the canvas without creating a Path or interacting with the default Path.
The clearRect method clears the area to transparent black which is the default color for “background” pixels.
Now available as a paperback or ebook from Amazon.
