HTML and CSS Reference
In-Depth Information
1. Open the adscript.js file.
2. Create a new variable called offerTextX and initialize this with the statement (adCanvas.width -
75) . Creating a variable to store this value will save you writing this statement three times, thus reducing
the chance of introducing a bug in your code. Place this code at the end of your drawAdvert() function.
function drawAdvert() {
...
// Add the Offer Text
var offerTextX = (adCanvas.width - 75);
}
3. Set the fillStyle property to #FFFFFF (white).
function drawAdvert() {
...
// Add the Offer Text
var offerTextX = (adCanvas.width - 75);
ctx.fillStyle = “#FFFFFF";
}
4. Set the font property to 24px Georgia .
function drawAdvert() {
...
// Add the Offer Text
var offerTextX = (adCanvas.width - 75);
ctx.fillStyle = “#FFFFFF";
ctx.font = “24px Georgia";
}
5. Draw the first line of text using the fillText() function. Use the offerTextX variable for the x para-
meter and set the y parameter to 55 .
function drawAdvert() {
...
// Add the Offer Text
var offerTextX = (adCanvas.width - 75);
ctx.fillStyle = “#FFFFFF";
ctx.font = “24px Georgia";
ctx.fillText(“10% OFF", offerTextX, 55);
}
6. Draw the next line of text. Again, use the offerTextX variable for the x parameter but set the y paramet-
er to 84 .
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);
}
Search WWH ::




Custom Search