Loading...
HTML Canvas
canvas is a blank drawing surface. HTML places it; JavaScript paints pixels (charts, games, effects).
Direct answer
Add <canvas id="c" width="300" height="150"></canvas>, then in JS get a 2D context with getContext("2d") and draw. Without script, users may only see fallback text inside the element. Prefer SVG for simple scalable icons; canvas when you need dynamic pixel drawing.
Canvas with fallback text
html
HTML Code
<canvas id="c" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
<script>
const ctx = document.getElementById("c").getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>Try it
- Add a canvas with id and size
- Draw a rectangle with the script above
- Change colors/sizes
- Note that resizing CSS size ≠ clearing the bitmap resolution (advanced detail for later)
Easy mistakes
- Expecting shapes from HTML alone without JS
- Forgetting fallback text for rare unsupported cases
- Using canvas for simple logos better suited to SVG
Summary
canvas+ JavaScript = drawings- Good for dynamic graphics
- SVG often better for simple icons
- Provide fallback content when useful
🧠 Test Your Knowledge
Ready to Start
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
3
Questions
70%
To Pass
∞
Time
∞
Attempts
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top