# Chapter 14—html5: Introduction to canvas

 Date 13.05.2016 Size 144.05 Kb. #43827

## Chapter 14—HTML5: Introduction to canvas

Section 14.2 canvas Coordinate System

14.1 By default, the coordinates (0, 0) represent which of the following?

a) the center of a canvas

b) the upper-left corner of a canvas

c) the bottom-left corner of a canvas

d) None of the above.

ANS: b

14.2 Which of the following statements is false?

1. A coordinate pair has both an x-coordinate (the horizontal coordinate) and a y-coordinate (the vertical coordinate).

2. The x-coordinate is the horizontal distance to the right from the left border of a canvas.

3. The y-coordinate is the vertical distance upward from the bottom border of a canvas.

4. Coordinate space units are measured in pixels (“picture elements”), which are the smallest units of resolution on a screen.

5. ANS: c. The y-coordinate is the vertical distance downward toward the bottom border of a canvas.

Section 14.3 Rectangles

14.3 The canvas element’s default width is ________.

1. 300

2. 150

3. 0

4. 100

ANS: a

14.4 The ________ specifies the color of the rectangle.

a) fillRect

b) fill

c) strokeRect

d) fillStyle

ANS: d

14.5 To specify the coordinates of the rectangle, we use fillRect in which format (where w is the width, h is the height, and x and y are the coordinates of the starting point)?

1. (w, h, x, y)

2. (h, w, x, y)

3. (x, y, w, h)

4. (x, y, h, w)

ANS: c

14.6 Which of the following is false?

1. If the width and height are 0, no stroke will appear.

2. If the width is 0, the result will be a line, not a rectangle.

3. If the height is 0, the result will be a line, not a rectangle.

4. None of the above.

ANS: d

Section 14.4 Using Paths to Draw Lines

14.7 The ________ method starts the path.

a) startPath

b) moveTo

c) beginPath

d) lineTo

ANS: c

14.8 The ________ method sets the x- and y-coordinates of the path’s origin.

a) startPath

b) moveTo

c) beginPath

d) lineTo

ANS: b

14.9 Which of the following statements is false?

1. The lineJoin attribute specifies the style of the corners where two lines meet.

2. The round lineJoin creates rounded corners.

3. The diameter of the round lineCap is equal to the half of the width of the line.

4. The width of the square lineCap is equal to half of the line width.

ANS: c. The diameter of the round lineCap is equal to the width of the line.

Section 14.5 Drawing Arcs and Circles

14.10 The ________ method can draw a circle to the canvas.

a) circle

b) arc

c) arcTo

d) arcJoin

ANS: b

14.11 When drawing an arc, the sixth argument specifies ________.

a) the radius of the circle

b) the arc’s starting angle in radians

c) the arc’s ending angle in radians

d) the direction in which the arc’s path is drawn

ANS: d

14.12 2 radians represents a ________ arc.

1. 360-degree

2. 180 degree

3. 90 degree

4. 270 degree

ANS: a

14.13 The ________ attribute specifies the blur and color of a shadow.

c) blur

ANS: b

14.14 The ________ method is used to draw a curve with a single point of inflection using four arguments.

1. curveTo

2. bezierCurveTo

4. Both (b) and (c)

ANS: c

14.15 The starting point of a quadratic curve is the last subpath destination, specified using the ________ method.

1. moveTo

2. lineTo

3. curveTo

4. Both (a) and (b)

ANS: d

Section 14.8 Bezier Curves

14.16 ________ have a starting point, an ending point and two control points through which the curve passes.

c) Ellipses

d) Circles

ANS: a

14.17 The ________ method specifies the location at which the color of the gradient changes.

a) colorStop

ANS: b

14.18 To draw a horizontal gradient, use the ________ method where the start and end have different x-coordinates but the same y-coordinates.

ANS: d

14.19 Use the ________ method to draw a radial gradient to a canvas.

ANS: a

Section 14.11 Images

14.20 The ________ method draws an image to a canvas.

a) createImage

b) drawImage

c) drawPicture

d) drawCanvas

ANS: b

Section 14.12 Image Manipulation: Processing the Individual Pixels of a canvas

14.21 The ________ method obtains an object that contains the pixels to manipulate.

a) imageData

b) getPixelData

c) getImageData

d) getPixels

ANS: c

Section 14.13 Patterns

14.22 When creating patterns using the createPattern method, the value repeat ________.

1. repeats the pattern horizontally

2. repeats the pattern vertically

3. is an invalid value

4. Both (a) and (b)

ANS: a

Section 14.14 Transformations

14.23 You can change the transformation matrix (the coordinates) on the canvas using method ________ so that the center of the canvas becomes the point of origin with the x, y values 0, 0.

a) transform

b) transpose

c) translate

d) scale

ANS: c

14.24 The ________ method can stretch a circle to create an ellipse.

a) arcStyle

b) ellipse

c) stretch

d) scale

ANS: d

14.25 The ________ method allows you to skew, scale, rotate and translate elements without using separate transformation methods.

a) transform

b) translate

c) animation

ANS: a

Section 14.15 Text

14.26 The ________ attribute specifies the style, size and font of the text.

a) font-face

b) font

c) text

d) text-attributes

ANS: b

14.27 The ________ attribute specifies the alignment points of the text.

a) font-face

b) font

c) textBaseline

d) text

ANS: c

14.28 Which of the following is not a possible textAlign attribute value?

1. left

2. start

3. bottom

4. end

ANS: c

Section 14.16 Resizing the canvas to Fill the Browser Window

14.29 When resizing the canvas to fill the browser window, set the the x1 value to ________ and the y1 value to ________, so no matter the size of the window, the x1 value will always be the width of the canvas and the y1 value the height of the canvas.

a) context.canvas.width, context.value.height

b) canvas.width, canvas.height

c) context.width, context.height

d) None of the above.

ANS: a

Section 14.17 Alpha Transparency

14.30 The ________ attribute is used to create alpha transparency.

1. alphaTransparency

2. globalAlpha

3. globalCompositeOperation

4. alphaGlobal

ANS: b

Section 14.18 Compositing

14.31 ________ allow(s) you to control the layering of shapes and images on a canvas.

a) Compositing

c) SVG

d) Patterns

ANS: a

14.32 If you use the ________ attribute value, the source image is displayed where the images overlap and both are opaque. Both images are transparent where there is no overlap.

a) source-over

b) destination-in

c) source-in

d) xor

ANS: c

14.33 Using the ________ attribute value, if the source image is opaque and the destination is transparent, the source image is displayed where the images overlap. Both images are transparent where there is no overlap.

a) source-out

b) source-over

c) xor

d) lighter

ANS: a

14.34 The ________ attribute value displays the sum of the source-image color and destination-image color—up to the maximum RGB color value (255)—where the images overlap. Both images are normal elsewhere.

a) lighter

b) source-over

c) xor

d) copy

ANS: a

14.35 Using the ________ attribute value, if the images overlap, only the source image is displayed (the destination is ignored).

a) lighter

b) destination-atop

c) xor

d) copy

ANS: d

14.36 With the ________ attribute value, the images are transparent where they overlap and normal elsewhere.

a) lighter

b) destination-atop

c) xor

d) copy

ANS: c

Section 14.19 Cannon Game

14.37 In the Cannon Game app we used ________ to determine whether the cannonball hit any of the canvas’s edges-, the blocker or a section of the target.

a) target detection

b) collision detection

c) collision awareness

d) compositing

ANS: b

Section 14.20 save and restore Methods

14.40 The ________ method is used to save the context's current state.

a) store

b) saveState

c) save

d) saveContext

ANS: c

Section 14.21 A Note on SVG

14.41 Which of the following statements is false?

a) Vector graphics are made of scalable geometric primitives such as line segments and arcs.

b) SVG (Scalable Vector Graphics) is JavaScript-based, so it uses an imperative approach.

c) HTML5 canvas is XML-based, so it uses a declarative approach.

d) Both (b) and (c)

ANS: d. SVG is XML-based, so it uses a declarative approach. HTML5 canvas is JavaScript-based, so it uses an imperative approach

Directory: ~vkepuska -> ece3553