HTML and CSS Reference
In-Depth Information
Figure 4-4.
Multiple closed curves
Additional curves
Besides the
context.quadraticCurveTo
method we've been using, there are a few other methods for
drawing curves, each with their own characteristic shape:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
: Adds a point to the current path
connected by a cubic Bézier curve with the two control points.
arcTo(cp1x, cp1y, cp2x, cp2y, radius)
: Adds an arc to the path using two control points
and radius, connected to the previous point by a straight line.
arc(x, y, radius, startAngle, endAngle [, antiClockwise])
: Adds an arc to the path
described by the circumference of a circle, from the start angle to end angle, in the given direction
(defaulting to clockwise), connected to the previous point by a straight line.
These methods are not used much in this topic; however,
context.arc
shows up throughout the example
code because it's an easy way to draw a circle. For example, this is how to draw a circle at point 100, 100
with a radius of 50:
context.beginPath();
context.arc(100, 100, 50, 0, (Math.PI * 2), true);
context.closePath();
context.stroke();
Creating shapes with fill
Now that we've drawn several paths using lines and curves, we use them to create shapes. The
context.fill()
method fills in the sub-paths with the current fill style.
The
context.fillStyle
property, like
context.strokeStyle
, is set using a CSS-style color string in
hexadecimal or RGB format. The default is black, or
"#000000"
. If you want to use a transparent color,
recall that you need to format it as a proper RGBA string.