HTML and CSS Reference
In-Depth Information
...
}
4. Set the shadowColor property to rgba(0,0,0,0.8) .
function drawAdvert() {
...
// Set a shadow
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;
ctx.shadowColor = “rgba(0,0,0,0.8)";
// Draw the offer circle
...
}
5. Save the adscript.js file.
That should have added a shadow to your circle. Open up the advert.html file in your text editor and check.
You should see a subtle shadow around the circle, like the one shown in Figure 14-13.
Figure 14-13 Adding a shadow to your canvas.
Adding the Offer Text
If you look back at Figure 14-1, you will see three lines of text inside the circle. Unfortunately, there is no easy way
to wrap text onto multiple lines using the Canvas API, so you will need to add each line of text to the canvas separ-
ately.
You've already learned how to add text to a canvas, so let's dive right in.
The code in this exercise can be found in folder 10.
Search WWH ::




Custom Search