HTML5 HTML5 Canvas and Graphics 2 — Questions and Answers
Question 1: Which method is called to render the current path as a filled shape on the canvas?
- fill() (Correct answer)
- paint()
- render()
- draw()
Correct answer: fill()
The fill() method fills the current path with the current fillStyle, rendering the interior of the shape.
Question 2: What does the canvas stroke() method do?
- Draws the outline of the current path using strokeStyle (Correct answer)
- Fills the path with a gradient
- Clears the current path
- Adds a shadow to shapes
Correct answer: Draws the outline of the current path using strokeStyle
The stroke() method draws the outline of the current path using the current strokeStyle and lineWidth settings.
Question 3: Which canvas method draws an image onto the canvas?
- drawImage() (Correct answer)
- renderImage()
- paintImage()
- addImage()
Correct answer: drawImage()
The drawImage() method draws an image, canvas, or video onto the canvas at a specified position, with optional sizing and cropping.
Question 4: What does the canvas save() method do?
- Saves the entire state of the canvas context to a stack (Correct answer)
- Saves the canvas as an image file
- Stores the current path
- Exports the canvas to PNG
Correct answer: Saves the entire state of the canvas context to a stack
The save() method pushes the current canvas state (transforms, styles, clipping) onto a stack so it can be restored later with restore().
Question 5: The canvas rotate() method rotates the canvas by:
- An angle specified in radians (Correct answer)
- An angle specified in degrees
- A percentage of a full rotation
- A number of canvas grid units
Correct answer: An angle specified in radians
The rotate(angle) method rotates the canvas transformation matrix by the given angle measured in radians.
Question 6: Which HTML5 technology is better suited for high-performance 3D rendering in the browser?
- WebGL via canvas getContext('webgl') (Correct answer)
- SVG with CSS transforms
- Canvas 2D context
- CSS 3D transforms alone
Correct answer: WebGL via canvas getContext('webgl')
WebGL, accessed via getContext('webgl') on a canvas element, provides hardware-accelerated 3D rendering using OpenGL ES.
HTML5 HTML5 Canvas and Graphics 2
Which method is called to render the current path as a filled shape on the canvas?