This set of Javascript Multiple Choice Questions & Answers (MCQs) focuses on “Graphics”.
1. What is the purpose of the canvas element?
a) Creates drawing surface
b) Exposes powerful drawing API to client-side JavaScript
c) Creates drawing surface & Exposes powerful drawing API to client-side JavaScript
d) Creates a rectangular box
View Answer
Explanation: The HTML canvas element is used to draw graphics, on the fly, via JavaScript. The canvas element is only a container for graphics. The canvas element has no appearance of its own but creates a drawing surface within the document and exposes a powerful drawing API to client-side JavaScript.
2. From which version of IE is canvas supported?
a) 7
b) 8
c) 9
d) 6
View Answer
Explanation: The canvas element is not supported by IE before IE9, but it can be reasonably well emulated in IE6, 7, and 8. It is supported from version 4 in chrome and 2 in firefox.
3. Which method is used to obtain the “drawing context” object?
a) getContext()
b) getObject()
c) get()
d) getDrawing()
View Answer
Explanation: The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported. Most of the Canvas drawing API is defined not on the canvas element itself, but instead on a “drawing context” object obtained with the getContext() method of the canvas.
4. What is the returning value of the getContext() method?
a) Drawing model
b) CanvasRenderingContext2D object
c) Context2D object
d) Container
View Answer
Explanation: Call getContext() with the argument “2d” to obtain a CanvasRenderingContext2D object that you can use to draw two-dimensional graphics into the canvas. It is important to understand that the canvas element and its context object are two very different objects.
5. How does SVG describe complex shapes?
a) Path of lines
b) Path of curves
c) Path of lines and curves
d) Planes
View Answer
Explanation: SVG stands for ‘Scalable Vector Graphics’ and it is used to define graphics for the Web. SVG is mostly used for vector type diagrams like Two-dimensional graphs in an X, Y coordinate system, Pie charts etc. SVG describes complex shapes as a “path” of lines and curves that can be drawn or filled.
6. Which is the method invoked to begin a path?
a) begin()
b) path()
c) createPath()
d) beginPath()
View Answer
Explanation: The beginPath() method begins a path, or resets the current path. It is called before creating any path or curve.
7. Which is the method invoked to connect the last vertex back to the first?
a) closePath()
b) close()
c) connectlast(first)
d) connect()
View Answer
Explanation: The closePath() method connects the last vertex back to the first, thereby creating a path. It connects the last point to the first point thereby creating a closed figure.
8. Which of the following are not the properties of a canvas object?
a) fillStyle
b) strokeStyle
c) lineWidth
d) lineSize
View Answer
Explanation: The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing. The strokeStyle property sets or returns the color, gradient, or pattern used for strokes. There is no property called lineSize associated with the canvas object.
9. Which of the following is a property used to check how crisp or fuzzy shadows are?
a) shadowColor
b) shadowBlur
c) strokeStyle
d) stroke
View Answer
Explanation: shadowBlur is used to check how crisp or fuzzy shadows are. The shadowBlur property sets or returns the blur level for shadows.
10. How do you restore a saved coordinate system?
a) restore()
b) getback()
c) set()
d) back()
View Answer
Explanation: The saved coordinate system is restored by calling the method restore() associated with the canvas object. The restore() method reset the canvas by “popping” the last state saved to the stack.
Sanfoundry Global Education & Learning Series – Javascript Programming.