5.5 Paths 117var radGrad = context.createRadialGradient(
260,320,40,200,400,200
);
radGrad.addColorStop(0.0,'yellow');
radGrad.addColorStop(0.9,'orange');
radGrad.addColorStop(1.0,'rgba(0,0,0,0)');
context.fillStyle = radGrad;
context.fillRect(0,200,400,400);
The shadow effect around the sphere is incidentally created by the last two color
stops, interpolating from orange to transparent black, which means the visible
part of the gradient ends directly at the outer circle.
After this quick trip through the world of colors and gradients, we now move on
to other geometric forms: paths.
5.5 Paths
The process of creating paths in Canvas is comparable to drawing on a piece of
paper: You put the pencil on the paper at one point, draw, lift the pencil off again,
and continue drawing at another point on the paper. The content you draw can
range from simple lines to complex curves or even polygons formed from these.
An initial example illustrates the concept, translating each step of writing the let-
ter A into Canvas path commands:
context.beginPath();
context.moveTo(300,700);
context.lineTo(600,100);
context.lineTo(900,700);
context.moveTo(350,400);
context.lineTo(850,400);
context.stroke();
The results are shown in Figure 5.6.