HTML5 HTML5 Canvas and Graphics 3

Question 1

What is the key difference between SVG and HTML5 Canvas?

Accepted Answer

SVG is vector-based and DOM-accessible; Canvas is pixel-based and script-driven

Answer

SVG stores shapes as DOM objects (scalable and accessible), while Canvas writes pixels directly to a bitmap that must be redrawn by scripts.

Question 2

Which canvas property controls the transparency level of drawn shapes?

Accepted Answer

globalAlpha

Answer

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.

Question 3

What does the canvas lineTo() method do?

Accepted Answer

Adds a straight line to the current path ending at the given point

Answer

The lineTo(x, y) method adds a straight line segment to the current path from the current point to the specified (x, y) coordinates.

Question 4

Which canvas method moves the drawing cursor to a new position without drawing?

Accepted Answer

moveTo()

Answer

The moveTo(x, y) method moves the path starting point to the specified coordinates without creating a line, like lifting a pen off paper.

Question 5

What does the toDataURL() method on a canvas element return?

Accepted Answer

A Base64-encoded data URI of the canvas image

Answer

The toDataURL() method returns a data URI containing a Base64-encoded representation of the canvas image in the specified format (default PNG).

HTML5 - HTML5 Web Development Practice Test

HTML5 - HTML5 Web Development Practice Test

HTML5 HTML5 Canvas and Graphics 3