Using Geolocation - HTML5 Foundations - page 282

ctx.beginPath();
ctx.arc(525, 75, 80, 0, Math.PI*2, true);
ctx.fillStyle = “#009A00";
}
5. Fill the circle.
function drawAdvert() {
...
// Draw the offer circle
ctx.beginPath();
ctx.arc(525, 75, 80, 0, Math.PI*2, true);
ctx.fillStyle = “#009A00";
ctx.fill();
}
6. Save the adscript.js file.
You should now have a green circle displayed on the right side of your canvas, as shown in Figure 14-9. Notice how
the edges of the circle go beyond the boundaries of the canvas.
Figure 14-9 Drawing a circle on your canvas.
Creating Gradients
The circle that you just drew onto your canvas looks good, but it would look even better if it used a gradient for the
fill instead of just a solid color. In this section, you learn how to create linear gradients. To do this, use the cre-
ateLinearGradient() function:
createLinearGradient(x1, y1, x2, y2);
This function will return a canvasGradient object and includes four parameters. These are the starting point ( x1
and y1 ) and the endpoint ( x2 and y2 ) of the gradient.
Once you have created your canvasGradient object and stored it in a variable, you need to add the colors to
your gradient. You do this using the addColorStop() function:
myGradient.addColorStop(position, color);