MCQs on Canvas and SVG Graphics | HTML

Canvas and SVG Graphics in HTML focuses on drawing and animating graphics using the <canvas> element and SVG (Scalable Vector Graphics). This chapter covers lines, shapes, text, paths, gradients, and animations, empowering developers to create dynamic web visuals.

MCQs:

Section 1: Drawing with <canvas>: Lines, Shapes, and Text

1. What does the <canvas> element allow you to do in HTML?
a) Display images
b) Draw graphics via scripting
c) Create forms
d) Define the page layout

2. Which of the following JavaScript methods is used to get the 2D context of a canvas?
a) getContext("2d")
b) getGraphics("2d")
c) setContext("2d")
d) getElement("canvas")

3. How do you draw a line on a <canvas> in HTML?
a) context.drawLine()
b) context.beginPath() and context.lineTo()
c) context.createLine()
d) context.drawPath()

4. Which method is used to draw a filled rectangle on the <canvas> element?
a) context.drawRect()
b) context.fillRect()
c) context.rectangle()
d) context.fillShape()

5. What is the function of context.beginPath() in canvas drawing?
a) It starts a new shape or path
b) It draws a line
c) It fills the shape with color
d) It closes the canvas

6. Which method is used to draw a circle on the canvas?
a) context.arc()
b) context.circle()
c) context.drawCircle()
d) context.fillCircle()

7. How do you draw text on a <canvas> in HTML?
a) context.addText()
b) context.writeText()
c) context.fillText()
d) context.drawText()

8. How can you change the line color when drawing on the canvas?
a) context.setLineColor()
b) context.strokeStyle
c) context.setColor()
d) context.fillColor()

9. Which property is used to set the thickness of a line in the canvas?
a) context.lineWidth
b) context.strokeWidth
c) context.lineSize
d) context.width

10. What is used to fill a shape with color on a canvas?
a) context.stroke()
b) context.fill()
c) context.draw()
d) context.color()

Section 2: SVG Basics: Shapes, Paths, and Gradients

11. What does SVG stand for in web development?
a) Scalable Vector Graphics
b) Simple Vector Graphics
c) Static Visual Graphics
d) Simple View Graphics

12. Which of the following is NOT an SVG shape element?
a) <circle>
b) <rect>
c) <ellipse>
d) <line>

13. How do you define a rectangle in SVG?
a) <rect width="100" height="50">
b) <rectangle width="100" height="50">
c) <box width="100" height="50">
d) <shape width="100" height="50">

14. What does the <path> element in SVG define?
a) A predefined shape
b) A closed or open shape with a series of drawing commands
c) A container for shapes
d) A text element

15. Which attribute of the <path> element defines the drawing direction?
a) d
b) pathData
c) draw
d) direction

16. How do you define a gradient fill in SVG?
a) <gradient>
b) <linearGradient> or <radialGradient>
c) <colorGradient>
d) <fillGradient>

17. Which attribute is used to set the color for a solid shape in SVG?
a) fill
b) color
c) stroke
d) shade

18. Which SVG element is used to create a straight line?
a) <line>
b) <path>
c) <rect>
d) <polygon>

19. How do you define a circle in SVG?
a) <circle radius="50">
b) <circle cx="50" cy="50" r="50">
c) <ellipse cx="50" cy="50" r="50">
d) <circle radius="100">

20. How can you make a line dashed in SVG?
a) stroke-dasharray="5,5"
b) dashArray="5,5"
c) lineStyle="dashed"
d) strokeStyle="dash"

Section 3: Animating SVGs

21. Which HTML element is used to animate an SVG element?
a) <animate>
b) <svganimate>
c) <motion>
d) <svg>

22. Which attribute defines the duration of an animation in SVG?
a) duration
b) time
c) animateTime
d) dur

23. How do you animate the position of a circle in SVG?
a) By modifying cx and cy attributes with animation
b) By using the <animatePosition> tag
c) By setting x and y values in the <circle> tag
d) By modifying the path element

24. Which of the following attributes in SVG animation is used to specify when an animation starts?
a) begin
b) start
c) init
d) delay

25. How do you animate an attribute value over time in SVG?
a) <animate attributeName="x" from="0" to="100" dur="2s"/>
b) <animateValue attribute="x" from="0" to="100"/>
c) <motion attribute="x" start="0" end="100"/>
d) <animate attr="x" from="0" to="100"/>

26. Which of the following attributes can be animated in SVG?
a) fill
b) stroke
c) x and y positions
d) All of the above

27. How do you repeat an animation indefinitely in SVG?
a) repeat="indefinite"
b) repeatCount="indefinite"
c) infinite="true"
d) loop="true"

28. What is the purpose of the keyTimes attribute in SVG animations?
a) To set the timing for specific keyframes
b) To repeat the animation at specific times
c) To define the maximum duration
d) To stop the animation

29. Which of the following can be used to animate a fill color in SVG?
a) fill-animation
b) <animateFill>
c) <animate attributeName="fill">
d) color-change

30. Which SVG element is used to create an animation that changes the shape’s color over time?
a) <animColor>
b) <animateColor>
c) <animate attributeName="fill">
d) <animateShape>

---

Answers:

Qno	Answer (Option with Text)
1	b) Draw graphics via scripting
2	a) getContext("2d")
3	b) context.beginPath() and context.lineTo()
4	b) context.fillRect()
5	a) It starts a new shape or path
6	a) context.arc()
7	c) context.fillText()
8	b) context.strokeStyle
9	a) context.lineWidth
10	b) context.fill()
11	a) Scalable Vector Graphics
12	d) <line>
13	a) <rect width="100" height="50">
14	b) A closed or open shape with a series of drawing commands
15	a) d
16	b) <linearGradient> or <radialGradient>
17	a) fill
18	a) <line>
19	b) <circle cx="50" cy="50" r="50">
20	a) stroke-dasharray="5,5"
21	a) <animate>
22	d) dur
23	a) By modifying cx and cy attributes with animation
24	a) begin
25	a) <animate attributeName="x" from="0" to="100" dur="2s"/>
26	d) All of the above
27	b) repeatCount="indefinite"
28	a) To set the timing for specific keyframes
29	c) <animate attributeName="fill">
30	c) <animate attributeName="fill">