HTML and CSS Reference
In-Depth Information
This code would create the shadow shown in Figure 14-12. Notice how the shadow is positioned down and to the
right of the rectangle.
Figure 14-12
A simple shadow.
Now that you understand how to add shadows to the objects that you draw on your canvas, let's update your advert-
isement.
The code in this exercise can be found in folder 9.
1.
Open the
adscript.js
file in your text editor.
2.
Set the
shadowOffsetX
and
shadowOffsetY
properties to
0
. This will position the shadow directly
behind the rectangle so that only the blurred edges are visible. Put this code underneath the code that creates
the gradient.
function drawAdvert() {
...
// Set a shadow
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
// Draw the offer circle
...
}
3.
Set the
shadowBlur
property to
10
.
function drawAdvert() {
...
// Set a shadow
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;
// Draw the offer circle
