HTML and CSS Reference

In-Depth Information

Your bricks are ready to go; now let's work on the ball.

6.2.3. Creating arcs and circles

You'll create the ball using
arc(x, y, radius, startAngle, endAngle)
, as

illustrated in
figure 6.7
, which is what you use to create circular shapes. Unlike the rect-

angles you drew, which started from the top left,
arc()
's starting point is in the center.

You'll give the
arc()
a radius in pixels, then a
startAngle
and
endAngle
, which

creates the circle.
StartAngle
is usually 0pi, whereas the
endAngle
is 2pi because it's

the circumference of a circle (using only 1pi will create half a circle).

Figure 6.7. An arc with these parameters creates a shape at 7, 22 (x, y) on a graph. Because the angle starts from 0

and goes to 2pi, it creates a full circle. If you were to make the end angle 1pi, it would produce half a circle.