Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 131
Q1501:
Which part of the code is responsible for defining the border of the canvas?
A. <canvas> tag
B. getContext("2d") method
C. fillRect() method
D. style="border:1px solid #000000;"
Correct Answer:
D
Chapter: 131
Q1502:
Fill in the blank: The _______ element is only a container for graphics and requires a script to draw.
A. <svg>
B. <canvas>
C. <img>
D. <div>
Correct Answer:
B
Chapter: 131
Q1503:
Which of the following correctly draws a green filled rectangle on the canvas?
A. ctx.fillStyle = "#00FF00"; ctx.fillRect(0,0,200,100);
B. ctx.strokeStyle = "#00FF00"; ctx.strokeRect(0,0,200,100);
C. ctx.fillStyle = "green"; ctx.drawRect(0,0,200,100);
D. ctx.fillRect(0,0,200,100); ctx.fillStyle = "#00FF00";
Correct Answer:
A
Chapter: 131
Q1504:
Fill in the blank: The method ctx.fillRect(0,0,200,100); will draw a rectangle starting at _______.
A. (0,0)
B. (0,200)
C. (200,0)
D. -100100
Correct Answer:
A
Chapter: 132
Q1505:
What is the coordinate of the upper-left corner of the HTML5 canvas?
A. (0,0)
B. -100100
C. -200200
D. (0,200)
Correct Answer:
A
Chapter: 132
Q1506:
Fill in the blank: The _______ method is used to define the starting point of a line in canvas.
A. lineTo(x,y)
B. moveTo(x,y)
C. stroke()
D. beginPath()
Correct Answer:
B
Chapter: 132
Q1507:
Which method is used to actually display a line on the canvas after defining its path?
A. draw()
B. paint()
C. fill()
D. stroke()
Correct Answer:
D
Chapter: 132
Q1508:
Fill in the blank: To draw a line on a canvas, the _______ method is used after defining the start and end points.
A. beginStroke()
B. startPath()
C. stroke()
D. drawLine()
Correct Answer:
C
Chapter: 132
Q1509:
Which of the following correctly draws a line from (0,0) to (200,100) on a canvas?
A. ctx.lineTo(0,0); ctx.moveTo(200,100); ctx.stroke();
B. ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
C. ctx.lineTo(200,100); ctx.stroke();
D. ctx.moveTo(200,100); ctx.lineTo(0,0); ctx.stroke();
Correct Answer:
B
Chapter: 132
Q1510:
Fill in the blank: The _______ method is used to specify the ending point of a line on the canvas.
A. moveTo(x,y)
B. lineTo(x,y)
C. stroke()
D. fill()
Correct Answer:
B
Chapter: 132
Q1511:
What is the purpose of the ctx.stroke() method in HTML5 canvas?
A. To fill a shape
B. To begin a new path
C. To display a line on the canvas
D. To clear the canvas
Correct Answer:
C
Chapter: 132
Q1512:
Which of the following sequences correctly draws a line on a canvas?
A. moveTo() -> lineTo() -> stroke()
B. lineTo() -> moveTo() -> stroke()
C. stroke() -> moveTo() -> lineTo()
D. stroke() -> lineTo() -> moveTo()
Correct Answer:
A
Chapter: 132
Q1513:
Fill in the blank: The coordinate (0,0) represents the _______ of the canvas.
A. bottom-right corner
B. upper-right corner
C. upper-left corner
D. center
Correct Answer:
C
Chapter: 132
Q1514:
Which method is necessary to start the process of drawing a line on a canvas?
A. startLine()
B. beginDraw()
C. moveTo()
D. drawLine()
Correct Answer:
C
Chapter: 133
Q1515:
What method is used to create a linear gradient in HTML5 Canvas?
A. createLinearGradient
B. createRadialGradient
C. addColorStop
D. fillRect
Correct Answer:
A
Chapter: 133
Q1516:
What method specifies the color stops in a gradient?
A. addColorStop
B. createLinearGradient
C. createRadialGradient
D. fillStyle
Correct Answer:
A
Chapter: 133
Q1517:
What are the valid position values for color stops in a gradient?
A. 0 to 10
B. 0 to 1
C. 1 to 100
D. 0 to 100
Correct Answer:
B
Chapter: 133
Q1518:
Which method is used to create a radial gradient?
A. createLinearGradient
B. createRadialGradient
C. addColorStop
D. fillRect
Correct Answer:
B
Chapter: 133
Q1519:
In the code example, what colors are used in the linear gradient?
A. yellow and red
B. blue and white
C. yellow and blue
D. red and yellow
Correct Answer:
C
Chapter: 133
Q1520:
How do you fill a rectangle with a gradient in HTML5 Canvas?
A. ctx.fillStyle = grd; ctx.fillRect(0,0,200,80);
B. ctx.createLinearGradient(); ctx.addColorStop();
C. ctx.createRadialGradient(); ctx.addColorStop();
D. ctx.fillRect(); ctx.createLinearGradient();
Correct Answer:
A