Using Geolocation - HTML5 Foundations - page 291

function drawAdvert() {
...
// Restore the saved context
ctx.restore();
// Add the Offer Text
...
}
4. Save the adscript.js file.
Problem solved! Open your advert.html file now; you should see that the text no longer has a shadow, as shown
in Figure 14-16. The save() and restore() function can be extremely useful when using the Canvas API, espe-
cially when you go on to create more complex drawings.
Figure 14-16 Using the save() and restore() functions to remove the text shadow.
Adding Images
The final thing that you need to add to your canvas is the background image. There are a number of ways to draw an
image onto the canvas, but I'm just going to show you the most popular (and easiest!) way.
You draw images onto a canvas using the drawImage() function:
drawImage(image, x, y);
This function takes three parameters. The image parameter should be an Image object, not just a path to an image
(more on this shortly), and the x and y parameters are used for positioning the image on the canvas. Although it is
possible to resize images on the canvas, by default images will be drawn to their native dimensions.
To create an Image object to pass into the drawImage() function, you can use the following statement:
var img = new Image();
Once you have created your new Image object, you can load your image file by setting the object's src property,
like so:
img.src = “myImage.png";