Learn Canvas
The HTML5 canvas element is a blank bitmap drawing surface that JavaScript can paint pixel by pixel, unlike static images or vector graphics.
What Is the Canvas Element?
The <canvas> element is a rectangular region you place in your HTML document that starts out completely blank. On its own it renders nothing more than an invisible box; every pixel inside it has to be painted by JavaScript through a drawing context. This makes canvas fundamentally different from an <img> tag, which displays a fixed picture, or an SVG graphic, whose shapes remain as objects in the document. Canvas is often described as 'immediate mode': you issue a drawing command, the pixels change, and the canvas immediately forgets what you asked it to draw.
A Bitmap, Not a Vector Surface
- Canvas is raster-based - it stores colored pixels, not shapes or objects.
- There is no way to select, move, or delete a rectangle you already drew; you can only repaint pixels.
- Animating on canvas means clearing the whole surface and redrawing every frame from scratch.
- Canvas drawings are invisible to screen readers and search engines unless you provide fallback text.
- Scaling a canvas drawing up can make edges blurry, since it is pixels, not mathematical paths.
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "steelblue";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>Setting the Canvas Size Correctly
A canvas has two sizes: its drawing surface (set with the width and height HTML attributes) and its display size (set with CSS). If you resize a canvas using only CSS, the browser stretches the existing bitmap to fit, which blurs and distorts everything you've drawn. Always set the real drawing buffer size through the attributes, or through the canvas.width and canvas.height properties in JavaScript.
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="correct" width="300" height="150" style="border:1px solid #ccc"></canvas>
<canvas id="stretched" width="150" height="75" style="width:300px;height:150px;border:1px solid #ccc"></canvas>
<script>
function drawGrid(id) {
const c = document.getElementById(id);
const ctx = c.getContext("2d");
ctx.strokeStyle = "crimson";
for (let x = 0; x < c.width; x += 15) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, c.height);
ctx.stroke();
}
}
drawGrid("correct");
drawGrid("stretched");
</script>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<canvas id="chart" width="400" height="200">
<p>Your browser does not support the canvas element. Summary: Sales grew 12% in Q1.</p>
</canvas>
<script>
const ctx = document.getElementById("chart").getContext("2d");
ctx.fillStyle = "#4caf50";
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = "#fff";
ctx.font = "20px sans-serif";
ctx.fillText("Canvas is supported!", 60, 100);
</script>
</body>
</html>Exercise: Canvas Introduction
What must you call on a canvas element to get an object you can use to draw 2D graphics?
Frequently Asked Questions
- What is HTML Canvas used for?
- Canvas draws pixels with JavaScript: charts, image editors, data visualisations, games and generative graphics. Anything where you need to paint a scene frame by frame rather than lay out elements is a good fit.
- Should I use Canvas or SVG?
- SVG suits a moderate number of shapes you want to style, animate or click individually, because each one is a real element. Canvas suits thousands of shapes or per-pixel work, because it draws to a single surface and stays fast where SVG would slow down.
- Do I need to know JavaScript before Canvas?
- Yes. The canvas element itself is one HTML tag; everything visible comes from JavaScript drawing commands. Comfort with functions, loops and objects is enough to start, and animation adds callbacks on top of that.
