HTML and CSS Reference
In-Depth Information
The code in this exercise can be found in folder 1 of the Chapter 14 download files.
Here are the steps to set up your canvas:
1. Create a new folder on your computer called canvas-ad . This is where you will put all your files related
to the Joe's Pizza advertisement.
2. Open your text editor and create a new file called advert.html . Make sure that you save this in your
ad-canvas folder.
3. Add the following HTML code to your advert.html file.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Joe's Pizza Co. Advert</title>
<script src="adscript.js"></script>
4. Save the advert.html file.
5. Now create a file called adscript.js and open it in your text editor. This is where you write all the code
that draws on the canvas.
6. Attach an empty function to the window.onload event.
window.onload = function() {
7. Save the adscript.js file.
Now that you have your file structure set up, it's time to add the <canvas> element to your HTML.
Canvas is not yet supported in all browsers, and so it is a good idea to provide some fallback content whenever you
use it. As with the <video> element, any content that you place between the tags of the <canvas> element will
be displayed if the browser does not support the Canvas API. In this example, you are going to add an image that
will be displayed if Canvas is not supported.
The code in this exercise can be found in folder 2.
Search WWH ::

Custom Search