Which element draws graphics, on the fly, via scripting (usually JavaScript)?

Which element draws graphics, on the fly, via scripting (usually JavaScript)?

• A. <canvas> element
• B. <svg> element
• C. <div> element
• D. <map> tag

Answer: (A)

Drawing graphics on the fly with scripting relies on a bitmap surface you can redraw each frame. The canvas element provides exactly that: a drawing area you access with JavaScript, get a 2D drawing context, and issue immediate drawing commands to render shapes, images, and text. Because you typically clear and redraw the scene for animation or real-time visuals, canvas is ideal for games, dynamic charts, and pixel-based effects. The SVG element, while also programmable, uses vector shapes described in the DOM and is retained in the document, which is a different approach from the per-frame redraw model canvas uses. A div is just a generic container with no built-in drawing capabilities, and a map is for defining clickable regions on an image, not for programmatic drawing.

Drawing graphics on the fly with scripting relies on a bitmap surface you can redraw each frame. The canvas element provides exactly that: a drawing area you access with JavaScript, get a 2D drawing context, and issue immediate drawing commands to render shapes, images, and text. Because you typically clear and redraw the scene for animation or real-time visuals, canvas is ideal for games, dynamic charts, and pixel-based effects. The SVG element, while also programmable, uses vector shapes described in the DOM and is retained in the document, which is a different approach from the per-frame redraw model canvas uses. A div is just a generic container with no built-in drawing capabilities, and a map is for defining clickable regions on an image, not for programmatic drawing.