HTML5 Guidelines for Web Developers

(coco) #1
5.5 Paths 121

Figure 5.9 The path method “bezierCurveTo()”


To create Bézier curves, we need the current point as a starting coordinate plus a
target coordinate and, depending on the type of curve, one or two control points.
In both cases, the coordinate x/y becomes the new current point after drawing
the curve.


5.5.3 Arcs..............................................................................................


Methods for creating arcs are not quite as straightforward. The first method is
defined by two coordinates and a radius:


context.arcTo(x1, y1, x2, y2, radius)


As shown in Figure 5.10, arcTo() creates the new path as follows: A circle with a
given radius is added to the line from x0/y0 to x1/y1 and then to x2/y2, so that
the circle touches the line in exactly two points, the start tangent t1 and the end
tangent t2. The arc between these two points becomes part of the path, and the
end tangent t2 becomes the new current point.

Free download pdf