Join Joseph Lowery for an in-depth discussion in this video Setting up the canvas, part of HTML5 Projects: Personalized Ads.
The first step in building our project is to create the initial advertisement as a canvas element. The reason it's a canvas element instead of an image is so that we can later replace what's displayed on the canvas programmatically. Working with canvas can be a little tricky, but in this course, I'm going to introduce you to an excellent helper library that greatly simplifies creating your canvas graphic. First, let's set up the necessary HTML for our canvas tag.
I have opened here the index.html file from the Chapter 2/02_01 folder in my code editor. Let's scroll down to around line 40, where I have a little placeholder comment. I'll remove that comment and then add in my canvas tag. I'll give it an ID of myCanvas and then specify a width of 200 and a height also of 200.
Then I'll move my cursor after the set of parenthesis that follows function but before the closing parenthesis and put an opening curly brace. Aptana automatically puts the closing curly brace in for me, so I can just hit Return to open that up and put in some code. So now we can identify the canvas that we're going to draw our text on, and that's done with a dollar sign, parenthesis, quotes, and we want to target our canvas, which as you'll recall we set up with an ID of myCanvas.
One of the nice things about jCanvas is if you're just throwing a single layer, which you often are, you can just use the attribute of layer: true in order to set that up. So I'll add a comma and then next we'll set the fill style and the fillStyle is actually the color, and we'll set that in quotes and just use our hexadecimal value of 36c, that's that kind of bright blue that you saw. We'll put a comma and then specify the font and put the string in quotes.
Here we are going to specify number of font properties including its style, bold, its size, which I'll set at 32 points-- not pixels but points. That's one of the advantages of working with canvas is that you can use measurement units that are more native to drawing applications like points. I'm also going to specify the font we want, which is Trebuchet, and after that item, one more comma. Next, let's specify exactly what we want the text to say on our canvas.
So I'll enter in text colon and then in quotes "Get Special Offer Here". All right, we'll put a comma. Now we need to declare where we want our text to be drawn. When you're drawing text with canvas, you specify the center point for the text to start from. Because our canvas is 200x200, the X and Y coordinates for the center point are going to be 100x100. So I'll enter x: 100, and I can just keep this on the same line, y: 100, enter another comma.
Okay, we just need to put in a few closing , one on line 21 and one on line 22. So, let's save our page and then let's go take a look at what we have in the browser. Not bad, very clean, very simple. With the initial canvas element done, you're ready to move on to the back of the card, that's the form, next.