Using Geolocation - HTML5 Foundations - page 289

7. Draw the final line of text. Once again, use the offerTextX variable but set the y parameter to 113 .
function drawAdvert() {
...
// Add the Offer Text
var offerTextX = (adCanvas.width - 75);
ctx.fillStyle = “#FFFFFF";
ctx.font = “24px Georgia";
ctx.fillText(“10% OFF", offerTextX, 55);
ctx.fillText(“your first", offerTextX, 84);
ctx.fillText(“meal", offerTextX, 113);
}
8. Save the adscript.js file.
Now if you open the advert.html file, you should see that the text appears within the circle, as shown in Figure
14-14.
Figure 14-14 Drawing the offer text on your canvas.
There is one problem here, however. Because you have set the shadow parameters on the context, there is a subtle
shadow on the text as well as the circle. The text would look better without a shadow. You are going to fix this in the
next section.
Saving and Restoring State
You set the shadow for the purpose of the circle, but didn't really intend for a shadow to be put on the text. To cancel
out the shadow, you could reset all the shadow properties so that the shadow would not be visible, but this involves
writing quite a bit of code—and if your drawing was more complex, this could also cause a headache. Luckily, there
is an easier solution.
You can save the state of your context at any point by using the save() function. This will create and save a snap-
shot of all your styles. You are then free to manipulate the styles as you wish. When you want to get your original
styles back, just call the restore() function: All the styles from the snapshot you saved are retrieved.
Here is example code that shows how this works:
ctx.fillStyle = “red";
ctx.fillRect(0,0,50,50);