HTML Tutorial
HTML Canvas
canvas is a drawing surface. JavaScript paints pixels: charts, games, and signatures.
A bitmap you draw yourself
The <canvas> element is an empty rectangle. HTML only reserves the space. JavaScript paints pixels onto it: bars on a chart, a game sprite, or a signature line.
Until a script runs, the canvas looks blank. That is expected. The markup is the surface; the script is the brush.
id, width, and height
Give the canvas an id so JavaScript can find it. Set width andheight as attributes. Those numbers are the drawing size in pixels, not CSS size.
Example
<canvas id="board" width="300" height="150">
Your browser does not support canvas.
</canvas>The text inside the tags is fallback. Modern browsers ignore it once they can draw. Screen readers still need a short description nearby if the drawing carries meaning.
Stretching a canvas with CSS without changing width and heightblurs the picture. Set the pixel size on the element, then style layout separately.
getContext('2d')
Call getContext('2d') to get a 2D drawing API. That object is usually namedctx. All fill, stroke, and path methods hang off it.
Example
<canvas id="board" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
</script>There is also a WebGL context for 3D. This chapter stays with '2d', which is enough for charts, simple games, and signatures.
fillRect and stroke
fillRect(x, y, width, height) paints a solid rectangle. The origin(0, 0) is the top-left corner of the canvas. x grows to the right;y grows downward.
Set fillStyle before you fill. Set strokeStyle andlineWidth before you stroke. strokeRect draws only the outline.
Example
<canvas id="board" width="300" height="150"></canvas>
<script>
const ctx = document.getElementById('board').getContext('2d');
ctx.fillStyle = '#0d9488';
ctx.fillRect(20, 20, 120, 80);
ctx.strokeStyle = '#0f172a';
ctx.lineWidth = 3;
ctx.strokeRect(160, 30, 100, 70);
</script>Open this in the live preview. You should see a filled teal box and a dark outline beside it. Change the numbers and run it again.
The preview runs scripts
StudyGrid’s HTML editor at /html/try is a live page preview, not the Python editor at /try. Scripts inside your HTML run in that preview, so canvas examples actually draw.
Keep the JavaScript short while you learn: get the context, set a color, draw a rectangle. Paths, text, and animation can wait until the first rectangle looks right.
If the canvas stays blank, check the id matchesgetElementById, and that width and height are greater than zero.
What canvas is good for
- Charts built from data you already have in the page
- Simple games that redraw many times per second
- Signature pads that store a picture of the strokes
Canvas is a bitmap. Scale it up and it gets blocky. For icons and logos that must stay sharp, use SVG in the next chapter.
Canvas vs an image
| img | canvas | |
|---|---|---|
| Source | A file (PNG, JPEG, WebP) | Pixels painted by JavaScript |
| Edits | Replace the file | Redraw in code |
| Sharp when scaled | No (bitmap) | No (also a bitmap) |
| Needs JavaScript | No | Yes, to show anything |
Next: SVG, which stores shapes as XML instead of pixels.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Maths
A bar for the value 7
canvas is a bitmap. JavaScript paints pixels. The HTML tag only sizes the drawing surface. Without script it is an empty box.
This bar is not a chart library. It is fillRect. For a real histogram you would still start with this surface.
Example
<canvas id="bar" width="240" height="80" style="border:1px solid #334155"></canvas>
<script>
const ctx = document.getElementById("bar").getContext("2d");
ctx.fillStyle = "#0369a1";
ctx.fillRect(20, 30, 7 * 24, 24);
</script>Physics
A 3-4-5 sketch
A line on canvas is not an SVG path. Scale it and it can blur. For a logo that must stay sharp, prefer SVG. For a quick lab sketch, canvas is fine.
a² + b² = c²
Example
<canvas id="tri" width="160" height="120"></canvas>
<script>
const c = document.getElementById("tri").getContext("2d");
c.beginPath();
c.moveTo(20, 100);
c.lineTo(140, 100);
c.lineTo(20, 20);
c.closePath();
c.stroke();
</script>