Web Programming with html5, css, and JavaScript

14. 
If you want to change the line properties for a drawing, you need to split the path into 
multiple paths. True or false.
12.8 Umbrella Web page
15. 
It is legal to use straight lines and curved lines together in a single path. True or false.
624
Chapter 12
 
Canvas

---

12.9 Face Web page
16. 
For shape positions and shape dimensions, what are two benefits of using named constants?
12.10 Using Canvas for transformations
17. 
What happens when you call the 
translate
function?
a) The coordinate system’s origin moves.
b) The drawn shapes move.
c) The JavaScript engine draws the current shape.
18. 
Typically, when clearing the canvas drawing area, what two functions should you call before 
calling 
clearRect
? Explain the purpose of each of those function calls.
19. 
When you want to rotate something, why is it common to call 
translate
before calling 
rotate
?
12.11 Moving Face Web page
20. 
What are two benefits of using helper functions?
Exercises
1. 
[after Section 12.3] In the Rectangles web page, suppose you want to add 
a 1-pixel-width black dashed border to the second rectangle that shows 
where the rectangle’s fill border would be if there were no 
strokeRect
method call. In other words, you want to display the border shown here. 
The following code fragment does much of the work. What single line 
of code should you insert above the code fragment? Hint: Look up the 
setLineDash
method on the Internet and use it.
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.strokeRect(140, 80, 70, 140);
2. 
[after Section 12.4] If you want to display text with a border and a filled interior, why should 
you normally call 
strokeText
after 
fillText
?
3. 
[after Section 12.5] Assume you’ve got a 
canvas
variable that holds the web page’s canvas 
object and a 
ctx
variable that holds the web page’s context object. Given this code:
ctx.font = "100px Arial, sans-serif";
ctx.fillText("Bullseye", canvas.width / 2, canvas.height / 2);
625
Exercises

---

What code would you need to insert above the given code in order to center the “Bullseye” 
string horizontally and vertically? Here’s the result:
4. 
[after Section 12.7] Provide a JavaScript function that generates the Text Baseline Examples 
web page shown in Figure 12.5. For the font size, use 25 pixels. For the horizontal lines’ 
color, use 
springgreen
. For the horizontal lines’ positions, use 
y
values of 40, 80, 120, 
and 160. You may use one path or multiple paths for the four lines. Your code should be 
efficient—do not draw something and then redraw it later.