HTML Questions & Answers – Client-Side Graphics with Canvas

This set of HTML test focuses on “Client-Side Graphics with Canvas”.

1. Which of the following element is used for canvas graphics?

a) <paint>
b) <canvas>
c) <graphic>
d) <css>
View Answer
Answer: b
Explanation: CSS i.e. Cascading Style Sheet is a scripting language. Canvas graphics is introduced in HTML5. Element used for canvas graphics is <canvas>. The HTML canvas element is used to draw graphics, on the fly, via scripting (usually JavaScript).
 
 

2. Which of the following statement is not true?
a) SVG stands for Scalable Vector Graphics
b) SVG is used to define graphics for the Web
c) SVG is a W3C recommendation
d) SVG doesn’t support event handlers
View Answer

Answer: d
Explanation: SVG stands for “Scalable Vector Graphics”, it is used to draw graphics for the web. W3C recommends SVG graphics. SVG also supports event handlers which is not supported in canvas.
advertisement
advertisement

3. 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
View Answer

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.

4. 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)
View Answer

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.
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate Now!

5. 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)
View Answer

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.

6. 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()
View Answer

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.
advertisement

7. 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()
View Answer

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().

8. 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()
View Answer

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().
advertisement

9. 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()
View Answer

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.

10. 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
View Answer

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.

Sanfoundry Global Education & Learning Series – HTML.

To practice all areas of HTML for tests, here is complete set of 1000+ Multiple Choice Questions and Answers.

advertisement
advertisement
Subscribe to our Newsletters (Subject-wise). Participate in the Sanfoundry Certification contest to get free Certificate of Merit. Join our social networks below and stay updated with latest contests, videos, internships and jobs!

Youtube | Telegram | LinkedIn | Instagram | Facebook | Twitter | Pinterest
Manish Bhojasia - Founder & CTO at Sanfoundry
Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.