Using Geolocation - HTML5 Foundations - page 285

Now open the advert.html file in your web browser and admire your lovely new gradient. It should look like the
one in Figure 14-11.
Figure 14-11 Adding a gradient to your canvas.
Adding Shadows
One more styling addition would look good on that circle: a shadow.
You can add a shadow to an object on your canvas by setting the shadowOffsetX , shadowOffsetY , shad-
owBlur , and shadowColor properties on your context.
Use the shadowOffsetX and shadowOffsetY properties to position the shadow. By default, the shadow will
be positioned directly underneath any objects that are drawn on the canvas after the shadow properties are set. The
shadowOffsetX property allows you to move the shadow to the left and right (use negative values to go left), and
the shadowOffsetY property allows you to move the shadow up and down (use negative values to go up).
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
The shadowBlur property specifies the size of the blur effect:
ctx.shadowBlur = 15;
If you set this to 0 (the default) there will be no blur at all.
Finally, the shadowColor property allows you to set the color of the shadow:
ctx.shadowColor ="rgba(0,0,0,0.8)";
Here is an example of how you could create a shadow for a simple rectangle:
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 15;
ctx.shadowColor = “rgba(0,0,0,0.8)";
ctx.fillStyle = “#CC0000";
ctx.fillRect(15,15,100,100);