Join Chris Converse for an in-depth discussion in this video Setting up an HTML composition, part of Design the Web: From Illustrator to HTML5 Canvas.
Now, one of the things you'll probably want to do with HTML 5 Canvas is create a logo for your website or for banner ad. So to begin, let's switch back over to the exercise files. Inside of the art files folder, let's grab the Amsterdam.jpg. And let's drag a copy of this to the my canvas folder on the desktop. Next let's go back to the HTML file. Let's get rid of the Drawscript code. Now down here in the body element, where we have our canvas, I want to put this inside of a div element. So we're going to hit a return after the body tag. Let's type div. Next, let's add a class. Let's call this myAd. Let's end that tag.
After the canvas element, let's end the div element. Now come in here and just format that a little bit. So now we have our canvas element inside of a div with a class of myAd. Let's scroll up. Inside of the style element here, after the body specification, let's come in here and add a new CSS rule. Let's start with .myAd to target the div with a class of myAd. Beginning bracket. Let's set position to relative. Next we'll set a width of 800 pixels. We'll set a height of 200 pixels.
Then we're going to set the background. First property, URL, we'll set that to amsterdam.jpg, inside a parentheses. Then we'll set a no repeat, and then a zero x and zero y position. Once that's complete, in the preview in the right, we can see the graphic showing up inside that div element. We also set a position of relative. This way we can absolute position the canvas element inside of this, and the canvas element will position in relation to the my advertisement. I'm going to open this up a little bit so we can see more of that graphic. And if I scroll down here, our canvas element has an id of my canvas element.
So next we're going to create another CSS rule that's going to position that element. And if I scroll down here we can see a canvas element with an id of my canvas element. So let's scroll up. After the myAd CSS rule, let's hit a Return. Next we'll type a pound sign, my canvas element to target that ID, beginning bracket. Inside here we're going to set position to absolute, that way we can position this inside the myAd element, lets set a top of 100 pixels, we'll set a left of 25 pixels.
And let's temporarily set a border so we can see the element. So let's set border, one pixel solid, and then a pound sign and three f's. And once we finish adding this rule, you'll see that the white border now shows us the dimensions of the canvas element. Now we can either resize this with CSS, or if we scroll down we can change the numbers inside of the height and width here. We'll set the width to 350. And we'll set the height to 80, and now we can see the new sides of the canvas element, represented by this white box. So now with our canvas element sized and positioned, next we'll work on converting our logo so that it can be generated inside of this area.