Deck 14: Html5: Introduction to Canvas

Question 1

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

A) moveTo
B) lineTo
C) curveTo
D) Both (a) and (b)

Answer 1

D

Question 2

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

A) imageData
B) getPixelData
C) getImageData
D) getPixels

Answer 2

C

Question 3

Which of the following is false

A) If the width and height are 0, no stroke will appear.
B) If the width is 0, the result will be a line, not a rectangle.
C) If the height is 0, the result will be a line, not a rectangle.
D) None of the above.

Answer 3

D

Question 4

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

A) repeats the pattern horizontally
B) repeats the pattern vertically
C) is an invalid value
D) Both (a) and (b)

Question 5

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

A) shadowColor
B) shadowBlur
C) blur
D) blurRadius

Question 6

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

Question 7

The canvas element's default width is ________.

A) 300
B) 150
C) 0
D) 100

Question 8

The ________ method starts the path.

A) startPath
B) moveTo
C) beginPath
D) lineTo

Question 9

The ________ method can draw a circle to the canvas.

A) circle
B) arc
C) arcTo
D) arcJoin

Question 10

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

A) startPath
B) moveTo
C) beginPath
D) lineTo

Question 11

The ________ method draws an image to a canvas.

A) createImage
B) drawImage
C) drawPicture
D) drawCanvas

Question 12

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

A) Bezier curves
B) Quadratic curves
C) Ellipses
D) Circles

Question 13

2< font_face=symbol >< /font > radians represents a ________ arc.

A) 360-degree
B) 180 degree
C) 90 degree
D) 270 degree

Question 14

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

A) colorStop
B) addColorStop
C) addColor
D) gradientColorStop

Question 15

The ________ specifies the color of the rectangle.

A) fillRect
B) fill
C) strokeRect
D) fillStyle

Question 16

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

A) createRadialGradient
B) drawRadialGradient
C) startRadialGradient
D) radialGradient

Question 17

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

A) curveTo
B) bezierCurveTo
C) quadraticCurveTo
D) Both (b) and (c)

Question 18

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)

A) (w, h, x, y)
B) (h, w, x, y)
C) (x, y, w, h)
D) (x, y, h, w)

Question 19

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.

Question 20

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

A) startLinearGradient
B) linearGradient
C) createGradient
D) createLinearGradient

Question 21

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

A) store
B) saveState
C) save
D) saveContext

Question 22

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

Question 23

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

A) lighter
B) destination-atop
C) xor
D) copy

Question 24

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

A) font-face
B) font
C) text
D) text-attributes

Question 25

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

Question 26

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

Question 27

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

A) arcStyle
B) ellipse
C) stretch
D) scale

Question 28

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

Question 29

The ________ attribute is used to create alpha transparency.

A) alphaTransparency
B) globalAlpha
C) globalCompositeOperation
D) alphaGlobal

Question 30

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

Question 31

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.

Question 32

The ________ attribute specifies the alignment points of the text.

A) font-face
B) font
C) textBaseline
D) text

Question 33

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

A) transform
B) translate
C) animation
D) transformation

Question 34

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

Question 35

Which of the following is not a possible textAlign attribute value

A) left
B) start
C) bottom
D) end

Question 36

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

A) Compositing
B) Gradients
C) SVG
D) Patterns