HTML5 Canvas and Graphics Flashcards
6 cards from real HTML5 practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 6 HTML5 Canvas and Graphics flashcards as text
What is the key difference between SVG and HTML5 Canvas?
Answer: SVG is vector-based and DOM-accessible; Canvas is pixel-based and script-driven
SVG stores shapes as DOM objects (scalable and accessible), while Canvas writes pixels directly to a bitmap that must be redrawn by scripts.
Which canvas property controls the transparency level of drawn shapes?
Answer: globalAlpha
The globalAlpha property sets the transparency level (0.0 fully transparent to 1.0 fully opaque) applied to all shapes and images drawn on the canvas.
What does the canvas lineTo() method do?
Answer: Adds a straight line to the current path ending at the given point
The lineTo(x, y) method adds a straight line segment to the current path from the current point to the specified (x, y) coordinates.
Which canvas method moves the drawing cursor to a new position without drawing?
Answer: moveTo()
The moveTo(x, y) method moves the path starting point to the specified coordinates without creating a line, like lifting a pen off paper.
What does the toDataURL() method on a canvas element return?
Answer: A Base64-encoded data URI of the canvas image
The toDataURL() method returns a data URI containing a Base64-encoded representation of the canvas image in the specified format (default PNG).
Which canvas method is used to create a linear gradient?
Answer: createLinearGradient()
The createLinearGradient(x0, y0, x1, y1) method creates a CanvasGradient object representing a linear gradient between two points.