midHTML5
What is the HTML5 Canvas element used for?
Updated Apr 28, 2026
Short answer
It is used to draw graphics on the fly via JavaScript (Raster-based).
Deep explanation
The <canvas> element is just a container; you must use the Canvas API in JS to draw shapes, text, or manipulate pixels. It is 'immediate mode', meaning once a shape is drawn, the browser 'forgets' it and only sees pixels.
Real-world example
Creating high-performance games or real-time data visualization charts.
Common mistakes
- Trying to style the inner drawings with CSS (CSS only styles the canvas box, not the contents).
Follow-up questions
- How does it differ from SVG?