HTML Canvas
The HTML Canvas tag <canvas> is a drawing surface that lets you create graphics, charts, animations and games using JavaScript. The canvas itself is just a container — drawing happens through the JavaScript Canvas API.
What is the Canvas Tag?
<canvas>creates a 2D bitmap drawing area.- Drawing is done with JavaScript using the 2D context.
- Supports shapes, lines, gradients, text and images.
- Used for games, charts, photo editing and animations.
Why Use Canvas?
Custom Graphics
Draw anything you can imagine pixel-by-pixel.
Games
Build browser games like Snake, Pong or platformers.
Charts
Create custom data visualizations and graphs.
Animations
Smooth 60-fps animations using requestAnimationFrame.
Image Editing
Apply filters, crops and transformations.
Fast Rendering
Optimized bitmap rendering by browsers.
Canvas Tag Syntax
- Element:
<canvas id="c" width="400" height="200"></canvas> - Get Context:
const ctx = c.getContext('2d'); - Rectangle:
ctx.fillRect(x, y, w, h); - Line:
ctx.beginPath(); ctx.moveTo(); ctx.lineTo(); - Text:
ctx.fillText("Hello", x, y);
Canvas Tag Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"
style="border:1px solid #333;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Filled rectangle
ctx.fillStyle = '#2563eb';
ctx.fillRect(20, 20, 100, 80);
// Text
ctx.fillStyle = '#000';
ctx.font = '20px sans-serif';
ctx.fillText('PBA Institute', 140, 70);
</script>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <canvas> | Defines the drawing surface. |
| getContext('2d') | Returns the 2D drawing context. |
| fillStyle | Sets the color used for filling. |
| fillRect(x,y,w,h) | Draws a filled rectangle. |
| fillText | Draws text on the canvas. |
Canvas API Highlights
Use Cases
- Games: 2D games, puzzles, platformers.
- Charts: Bar, line and pie charts.
- Image editors: Crop, draw, watermark.
- Signatures: Capture handwritten signatures.
Practice Questions
- Draw a red circle on a canvas using
arc(). - Draw three rectangles in different colors.
- Write text on canvas with custom font and size.
- Use
requestAnimationFrameto animate a moving box.
Frequently Asked Questions
What is the canvas tag?
An HTML5 element that creates a 2D drawing surface controlled by JavaScript.
Is canvas accessible?
Less so than HTML elements. Provide fallback content inside the canvas tag.
Difference between canvas and SVG?
Canvas is bitmap (pixel-based); SVG is vector (XML-based). SVG is better for scalable graphics.
Can canvas display animations?
Yes, by re-drawing the canvas at high frame rates using requestAnimationFrame.
Conclusion
The HTML Canvas tag opens the door to graphics, games and rich data visualizations on the web. Combined with the JavaScript Canvas API, you can build truly creative and interactive experiences.
Additional Tips
- Set width via attribute: Not CSS, to avoid blurring.
- Clear before re-draw: Use
clearRectin animations. - Add fallback: Show a message for older browsers.
- Use libraries: Try Konva, p5.js or Fabric.js for complex work.