HTML and CSS Reference
ctx.fillStyle = “rgba(0,0,0,0.4)";
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.
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.