Trigonometry for Animation - HTML5 Animation with JavaScript - page 85

You can issue a context.fill() command almost any time during the process of drawing. This
computes a shape from the current location on the sub-path to the beginning point. Generally, the drawing
sequence is as follows:
 beginPath
 moveTo
 lineStyle (if any)
 fillStyle (if any)
 A series of lineTo and quadraticCurveTo methods (or similar curves)
 closePath (to close the shape)
 fill (shape color)
 stroke (shape outline)
You can use the first four methods in just about any order without affecting what is drawn. It's not required
to specify a line or fill style, but if you do not, you will use the default color: black.
If you do not draw a line back to the original point from which you started, the canvas will still fill in the
shape when you call the command context.fill —but it will not close the path and draw the completed
outline. To do that, call the method context.closePath and the path will be automatically closed.
Go ahead and play around with drawing fills. You can even use the closed curve example from the
previous section ( 06-multi-curve-3.html ), because this example is already generating a closed shape.
Throw in a context.fillStyle statement before the first context.quadraticCurveTo —for example,
context.fillStyle = "#ff0000" —and finish off the code with context.fill() .
If you do this, notice where sections of the curve cross over itself—here the fill kind of disappears. There's
not much you can do about that, but for the most part, you won't draw shapes that intersect like this. On
the other hand, you can use that behavior to create some interesting shapes.
Creating gradient fills
A gradient fill is a fill of at least two colors. A part of the shape starts out one color, and it slowly blends into
another color, possibly transitioning through one or several other predefined colors on its way.
Specifying the gradient type
There are two types of canvas gradient fills: linear and radial. In a linear gradient fill , the gradient of colors
lies along a line from one point to the other. Create a linear gradient with
context.createLinearGradient(x0, y0, x1, y1) , which paints along the line between point (x0, y0)
and point (x1, y1). Figure 4-5 shows a few examples of linear gradient fills.