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);
}