HTML Canvas
<canvas> creates a drawing surface. HTML creates the surface, but JavaScript normally does the actual drawing. You can draw shapes, text, images, games, charts, and animations on a canvas. The browser treats the result mainly as pixels rather than separate HTML shapes. Canvas is powerful for fast, changing graphics. It is different from SVG, where shapes are separate elements that the browser can understand and target individually.
Why this matters
- ·Canvas is useful for games and changing graphics.
- ·JavaScript can draw directly onto the canvas.
- ·It can handle many pixel-based drawing tasks efficiently.
Common mistakes
- ·Canvas graphics are not automatically accessible like normal semantic HTML.
- ·Using canvas for a simple icon can be unnecessary when an image or SVG is better.
- ·You need JavaScript for most useful drawing tasks.
Your codeHTML
Live preview
Frequently asked questions
A drawing surface.
Practice questions
Question 1
Create a canvas and draw a rectangle with JavaScript.
Your codeHTML
Live preview
Question 2
Draw a circle on a canvas.
Your codeHTML
Live preview
Quick check
Just for this topic answer honestly, then check yourself.
1 / 3