HTML Questions - Client Side Graphics with Canvas

1. To draw on the canvas, authors must first obtain a reference to a context using the ______________ method of the canvas interface element.
a) getImageData
b) toDataURL
c) getContext
d) restore

Answer: c
Explanation: The method getImageData(), returns an imageData that copies pixel data for a specified thing in canvas. ContextType is a DOMString containing the context identifier defining the drawing context associated to the canvas.

2. The ___________ method must add the scaling transformation described by the arguments to the transformation matrix.
a) scale(x, y)
b) translate(x, y)
c) rotate(angle)
d) skew(x,y)

Answer: a
Explanation: HTML5 canvas provides scale(x, y) method which is used to increase or decrease the units in our canvas grid. The position (0, 0) is remaped in canvas by translate(x, y) method. If one want to rotate the current drawing then rotate(angle) method can be used

3. Which method must clear the pixels in the specified rectangle that also intersects the current clipping region to a fully transparent black, erasing any previous image?
a) strokeRect(x, y, w, h)
b) clearRect(x, y, w, h)
c) fillRect(x, y, w, h)
d) removeRect(x,y,w,h)

Answer: b
Explanation: StrokeRect(x, y, w, h) draws rectangle without filling it. The clearRect() method clears the specified pixels within a given rectangle. FillRect(x, y, w, h) method draws filled rectangle.

4. When the _____________ method is passed an animated image as its image argument, the user agent must use the poster frame of the animation, or, if there is no poster frame, the first frame of the animation.
a) measureText()
b) imageData()
c) drawImage()
d) setImage()

Answer: c
Explanation: The width of specified text present in an object is given by measureText() method. The drawImage() method draws an image, canvas, or video onto the canvas. ImageData() method provides image data in pixels in canvas.

5. The ____________ method must create a new clipping region by calculating the intersection of the current clipping region and the area described by the current path, using the non-zero winding number rule.
a) fill()
b) stroke()
c) clip()
d) get()

Answer: c
Explanation: The path one defines is drawn by stroke() method. Any region/shape or size in canvas is clipped by clip(). The fill() method fills the current drawing (path). The default color is black. There is no method like get().

6. The ____________ method must fill all the subpaths of the current path, using fillStyle, and using the non-zero winding number rule.
a) fill()
b) stroke()
c) clip()
d) get()

Answer: a
Explanation: The path one defines is drawn by stroke() method. Any region/shape or size in canvas is clipped by clip(). The fill() method fills the current drawing (path). The default color is black. There is no method like get().

7. Which of the following methods must empty the list of subpaths so that the context once again has zero subpaths?
a) closePath()
b) beginPath()
c) moveTo(x, y)
d) endPath()

Answer: b
Explanation: ClosePath() creates a path that starts from current point up to the starting point. The beginPath() method begins a path, or resets the current path. MoveTo(x, y) moves the point specified in canvas but without creating the line. There is nothing like endPath() in canvas.

8. An API is an application programming interface consisting of methods and properties which allow the author to get or set data or execute commands to the user agent.
a) True
b) False

Answer: a
Explanation: API, an abbreviation of application program interface, is a set of routines, protocols, and tools for building software applications. API allow the author/owner to get or set data or execute commands to the user agent.

9. Which of the following is not a type of attribute for input tag?
a) day
b) week
c) month
d) time

Answer: a
Explanation: Day is not defined in the pre-defined attribute list of input tag. Week attribute defines week and year when used as attribute in input tag. Month specifies month and year when it is accessed in input tag. The time attribute displays current time in html.

10. The new __________ element is supposed to represent some form of extra details, such as a tooltip or revealed region that may be shown to a user.
a) progress
b) meter
c) details
d) menu

Answer: c
Explanation: A scalar measurement within a range or fractional value is defined by meter tag. A list/menu of coommands is displayed by menu tag in html. The details tag specifies additional details that the user can view or hide on demand. The details tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. Progress of a task is done by progress element.