Deck 12: Canvas

Question 1

Using named constants for shape positions and shape dimensions makes your web page drawings:

A) have a smaller file size.
B) faster.
C) scalable.

Answer 1

C

Question 2

What is the context object property in charge of specifying horizontal alignment for text in the canvas drawing area?

A) alignHorizontal
B) textAlign
C) textBaseline

Answer 2

B

Question 3

An applet is a stand-alone JavaScript program.

Answer 3

False

Question 4

A benefit of using helper functions is that they allow you to execute the helper functions' tasks from different places in your program while avoiding redundant code.

Question 5

For the context object's fillRect method, the JavaScript engine assumes units of pixels for the x, y, width, and height argument values, and the programmer does not specify units explicitly.

Question 6

After the browser engine assigns a value to the context object's lineWidth property, that line width will be used for all subsequent line drawings until the lineWidth property is reassigned.

Question 7

The ______ object represents the canvas element's drawing area. After retrieving it from the canvas object, you use it to call methods that draw and animate graphics objects.

Question 8

Given the following syntax for the arc method, describe the purpose of counterclockwise.
context.arc(x, y, radius, start-angle, end-angle, counterclockwise);

Question 9

What does the following method call do?
context.setTransform(1, 0, 0, 1, 0, 0);

Question 10

If you translate a graphics object, you'll usually want to clear the canvas drawing area before you draw the translated object. If you rotate a graphics object, there's no need to clear the canvas drawing area. Why the difference?

Question 11

How do you specify the color for the interior of a rectangle?

A) Use the rectangle object to call the <code>setColor</code> method.
B) Use the rectangle object to call the <code>setInterior</code> method.
C) Before calling <code>fillRect</code>, assign a color value to the context object's <code>fillStyle</code> property.

Question 12

What happens when the following code executes?
<code>ctx.strokeRect(0, 0, 250, 40);</code>

A) The JavaScript engine draws the interior of a rectangle whose center is centered in the canvas drawing area.
B) The JavaScript engine draws the interior of a rectangle whose top-left corner is centered in the canvas drawing area.
C) The JavaScript engine draws the border of a 250 x 40 pixel rectangle whose center is centered in the canvas drawing area.
D) The JavaScript engine draws the border of a 250 x 40 pixel rectangle whose top-left corner is at the top-left corner of the canvas drawing area.

Question 13

Given the following syntax for the arc method, what do x and y represent?
<code>context.arc(x, y, radius, start-angle, end-angle, counterclockwise);</code>

A) They are coordinates for the arc's center point.
B) They are coordinates for the arc's starting and ending points.
C) They are coordinates for the box that circumscribes the arc.

Question 14

Suppose you have created an arc by calling the context object's <code>arc</code> method. If you then call the fill method, what happens?

A) It draws the interior of the arc's line.
B) It draws the interior of the arc, filling in the partial circle from the arc's two end points.
C) It draws a straight connecting line between the arc's two end points.

Question 15

In calling the context object's <code>rotate</code> method, which of the following arguments do you pass to it?

A) A value for the amount of rotation, in units of degrees
B) A value for the amount of rotation, in units of radians
C) Values for x and y positions, in units of pixels

Question 16

A problem with Flash is that it is not built into browser software.

Question 17

To rotate around a position different from the coordinate system's origin, you should first call <code>translate</code> to move the origin so it is centered at the position where you want the rotation to take place.

Question 18

When you call the context object's <code>rotate</code> method, the JavaScript engine rotates the coordinate system around the origin and then refreshes the canvas drawing area by redrawing it.

Question 19

The text that appears between the canvas element's tags is known as __________ content. It gets displayed when the user's browser doesn't support the canvas element.

Question 20

The context object's <code>moveTo</code> method moves the drawing ______, so the JavaScript engine knows where you want to start writing.

Question 21

If you call ctx.scale(2, 2) and then call ctx.scale(1.5, 1.5), what happens?

A) Unless this is another scale method call, all future drawing operations use 1.5 times as many pixels as before for their size and position values.
B) Unless this is another scale method call, all future drawing operations use 6 times as many pixels as before for their size and position values.
C) The next drawing operation (but not subsequent drawing operations) uses 1.5 times as many pixels as before for its size and position values.
D) The next drawing operation (but not subsequent drawing operations) uses 6 times as many pixels as before for its size and position values.

Question 22

The standard way to clear the canvas drawing area is to call four of the context object's methods. What is the proper order for calling those methods?

A) setTransform, save, clearRect, restore
B) save, setTransform, clearRect, restore
C) clearRect, save, setTransform, restore

Question 23

Given the following syntax for the clearRect method, if you want to clear the entire canvas drawing area, what values are appropriate for the method's first two arguments?
Context.clearRect(top-left-x, top-left-y, width, height);

A) 0, 0 (assuming the current coordinate system is the same as the canvas drawing area)
B) -1, -1
C) null, null

Question 24

Given the following syntax for the clearRect method, if you want to clear the entire canvas drawing area, what values are appropriate for the method's third and fourth arguments?
Context.clearRect(top-left-x, top-left-y, width, height);

A) canvas.width, canvas.height (where canvas is the canvas element's object)
B) MAX_WIDTH, MAX_HEIGHT
C) null, null

Question 25

To indicate the start of a path:

A) call the context object's beginPath method.
B) call the context object's moveTo method.
C) call the context object's start method.

Question 26

Which of the following is the context object property in charge of specifying vertical alignment for text in the canvas drawing area?

A) alignHorizontal
B) textAlign
C) textBaseline

Question 27

Given the following syntax for the arc method, the start-angle and end-angle arguments are the arc's starting and ending angles, in radians.
context.arc(x, y, radius, start-angle, end-angle, counterclockwise);

Question 28

If you would like your drawn rectangle's border to have a line width equal to the value specified by the lineWidth property, you should call the strokeRect method before the fillRect method.

Question 29

When assigning colors for canvas shapes, you can use any of the color value formats that are used for CSS.

Question 30

To adjust the number of pixels that position and size values represent, you can call the context object's ______ method.