Canvas

Definition

The `<canvas>` element is used to draw graphics on a web page via JavaScript. It is a resolution-dependent bitmap canvas.

Explain Like I'm New

HTML creates a blank box. JavaScript grabs a digital paintbrush and actually draws lines, circles, text, or entire video games inside that box pixel by pixel.

Real World Example

Browser-based video games (like Flappy Bird clones), interactive charts (Chart.js), or signature pads where users draw their signature with a mouse.

Common Use Cases

•Game development
•Data visualization
•Photo editing in the browser

Interactive Example

Interview Questions

basic

Does the `<canvas>` tag draw graphics by itself?

intermediate

What is the difference between Canvas and SVG?

Flash Cards

Question

Draw by itself?

Click to reveal answer

Answer

No. The `<canvas>` tag is just an empty container. You MUST use JavaScript to draw anything on it.

Question

Canvas vs SVG?

Click to reveal answer

Answer

Canvas is pixel-based (bitmap). If you zoom in, it gets blurry. It's great for games with thousands of moving objects. SVG is math-based (vector). It never loses quality when zoomed, and each shape is a real DOM element you can target with CSS.