HTML Canvas
The <canvas> element is a blank drawing area. You draw on it with JavaScript.
The canvas Element
Example
<canvas id="board" width="300" height="150"></canvas>On its own, a canvas is empty and invisible. Always set width and height in the HTML. If you only resize it with CSS, the drawing gets stretched and blurry.
Canvas is used for games, charts, photo editors, signature pads and animations.
Your First Drawing
Drawing always starts the same way: find the canvas, then get its 2D "context". The context is the object that has all the drawing tools.
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="board" width="300" height="150" style="border:1px solid #999;"></canvas>
<script>
const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e34c26";
ctx.fillRect(20, 20, 120, 80); // x, y, width, height
ctx.strokeStyle = "navy";
ctx.lineWidth = 4;
ctx.strokeRect(160, 20, 120, 80);
</script>
</body>
</html>The left box is filled. The right box is only an outline.
Canvas Coordinates
The top-left corner is (0, 0). x grows to the right and y grows downwards, which is different from maths class.
| Point | Position |
|---|---|
(0, 0) | Top-left corner |
(300, 0) | Top-right corner of a 300-wide canvas |
(0, 150) | Bottom-left corner of a 150-high canvas |
Main Drawing Tools
| Code | Draws |
|---|---|
fillRect(x, y, w, h) | A filled rectangle |
strokeRect(x, y, w, h) | A rectangle outline |
clearRect(x, y, w, h) | Erases an area |
beginPath(), moveTo(), lineTo(), stroke() | Lines |
arc(x, y, r, start, end) | Circles and parts of circles |
fillText(text, x, y) | Text |
fillStyle, strokeStyle | The fill and line colours |
lineWidth, font | Line thickness and text font |
Lines and Circles
A path is a shape you build step by step, and then draw.
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="c" width="300" height="160" style="border:1px solid #999;"></canvas>
<script>
const ctx = document.getElementById("c").getContext("2d");
// a line
ctx.beginPath();
ctx.moveTo(20, 140);
ctx.lineTo(140, 20);
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
ctx.stroke();
// a circle: centre (220, 80), radius 50
ctx.beginPath();
ctx.arc(220, 80, 50, 0, 2 * Math.PI);
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>Angles in arc() are in radians, not degrees. A full circle is 2 * Math.PI, half a circle is Math.PI.
Drawing Text
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="c" width="320" height="100" style="border:1px solid #999;"></canvas>
<script>
const ctx = document.getElementById("c").getContext("2d");
ctx.font = "bold 28px Arial";
ctx.fillStyle = "#e34c26";
ctx.fillText("Workownix", 20, 45);
ctx.font = "18px Arial";
ctx.fillStyle = "#333";
ctx.fillText("Certificate of Completion", 20, 80);
</script>
</body>
</html>A Simple Bar Chart
Here is a small chart of a shop's sales for four days. The bars are drawn in a loop.
Example
<!DOCTYPE html>
<html>
<body>
<h3>Laptops sold this week</h3>
<canvas id="chart" width="320" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const ctx = document.getElementById("chart").getContext("2d");
const days = ["Mon", "Tue", "Wed", "Thu"];
const sales = [5, 9, 3, 7];
ctx.font = "14px Arial";
for (let i = 0; i < sales.length; i++) {
const x = 30 + i * 70;
const height = sales[i] * 15;
const y = 170 - height;
ctx.fillStyle = "#2a7ae2";
ctx.fillRect(x, y, 40, height);
ctx.fillStyle = "#000";
ctx.fillText(days[i], x + 5, 190);
ctx.fillText(sales[i], x + 14, y - 5);
}
</script>
</body>
</html>Canvas and Accessibility
A canvas is just pixels. Screen readers cannot read what you drew. Put a short text description between the canvas tags, and show important numbers as text or a table as well.
Example
<canvas id="chart" width="320" height="200">
Sales chart: Monday 5, Tuesday 9, Wednesday 3, Thursday 7 laptops.
</canvas>For charts on real websites, ready-made libraries like Chart.js draw on a canvas for you. Learning the basics here helps you understand them.
Exercise
Exercise
What must you call before you can draw on a canvas?