HTML and CSS Reference
In-Depth Information
ctx.fillStyle = “rgba(0,0,0,0.4)";
ctx.fillRect(0,0,600,150);
}
6.
Save the
adscript.js
file.
Now if you open the
advert.html
file in your web browser, you should see a rectangle that looks like the one
shown in Figure 14-3.
Later in this chapter, you will be taking advantage of Canvas layers to add an image underneath this rect-
angle—hence the need for it to be semitransparent.
Figure 14-3
The canvas with a semitransparent black rectangle.
Other Functions for Drawing Rectangles
In addition to the
fillRect()
function, two other functions can be used for drawing rectangles. These are
strokeRect()
and
clearRect()
.
The
strokeRect(x, y, width, height)
function is used to draw the outline of a rectangle. This has a simil-
ar effect to adding a border to an HTML element using CSS.
The
clearRect(x, y, width, height)
function clears a rectangular area on the canvas. Anything that has
already been drawn on the canvas that falls within the area of this new rectangle will effectively be deleted.
Adding Text
The next job to complete is to add the text to your canvas. In this section, you are going to focus on adding the “New
York's Best Pizza” and “Joe's Pizza Co.” text, shown earlier in Figure 14-1.
You draw text onto a canvas using the
fillText()
function:
fillText(text, x, y);
This function has three parameters: the
text
that you want to draw and the
x
and
y
coordinates specifying where
you want to place that text.
