HTML Canvas

Previously, SVG put sharp icons and shapes on the page as vector markup or a .svg file. This lesson introduces canvas: a blank bitmap box that JavaScript paints. HTML only places and sizes the surface; scripts draw pixels. Scope stays practical — element + a tiny 2D draw — not a full Canvas API, games, or WebGL course.

Why canvas in an HTML course

Beginners meet canvas in charts, mini games, and dynamic previews. Knowing the split helps: HTML owns the element; JS owns the pixels. After SVG’s markup graphics, canvas shows the other common drawing tool in the browser. You still need only a few APIs here — getContext("2d") and fillRect — enough to prove the idea without drowning in paths, transforms, or animation loops.

Direct answer

1) Add <canvas id="…" width="…" height="…"> with useful fallback text inside for rare unsupported cases.
2) In JavaScript, select the element and call getContext("2d") to get a drawing context.
3) Draw with context methods such as fillStyle + fillRect(x, y, w, h).
4) width / height attributes set the bitmap resolution (drawing buffer), not only CSS layout size.
5) Prefer SVG for simple scalable icons and logos; prefer canvas when pixels must change often under script control.
6) This HTML lesson is an intro; deep Canvas API topics belong in a JS/graphics follow-up.

Tiny canvas element

A canvas without script is an empty rectangle (plus any fallback text). The HTML job is to declare size and an id so scripts can find it — same “hook” habit as giving form controls ids.

Reading the shell

• <canvas> creates the drawing surface in the page
• width and height attributes set the internal bitmap size in CSS pixels
• id lets JavaScript select this canvas uniquely
• Text between the tags is fallback when canvas drawing is unavailable
• CSS can change the displayed box; mismatch with attributes can stretch/blur the bitmap (advanced detail)
• Unlike SVG, there are no shape children in the HTML — drawing happens in script

Draw a rectangle with 2D context

After the shell exists, a short script paints. getContext("2d") returns the common 2D API; fillRect fills an axis-aligned rectangle. That is enough to see canvas working.

Reading the draw calls

• getElementById("c") finds the canvas from the previous pattern
• getContext("2d") opens the 2D drawing API (other contexts exist; ignore them here)
• fillStyle sets the fill color before painting
• fillRect(x, y, width, height) fills a rectangle in canvas coordinates (origin top-left)
• Without the script, visitors only see fallback text — HTML alone does not draw the blue box
• Next optional lessons leave graphics; web storage returns to saving data in the browser

Choosing canvas vs SVG

• Static logo or icon that must stay sharp: SVG (previous lesson)
• Pixels that update often (live chart, game frame): canvas
• You want shapes as DOM you can style with CSS: lean SVG
• You already think in “paint this pixel region”: canvas
• Simple badge next to a heading: SVG is usually less work
• Full path animation, WebGL, or game engines: beyond this HTML intro

Practice — canvas on a page

1. Paste the canvas shell; confirm the empty box (or fallback) appears.
2. Add the script; confirm the blue rectangle draws.
3. Change fillStyle and fillRect numbers; redraw by refreshing.
4. Temporarily remove the <script> and note that shapes disappear — only fallback remains.
5. Stretch the canvas with CSS width/height only and observe possible blur vs changing attributes.
6. Write one sentence: canvas is a JS bitmap surface; SVG is vector markup — different tools.
7. Peek ahead: web storage saves key/value data in the browser, not drawings.

Easy mistakes

• Expecting colored shapes from HTML alone without JavaScript
• Forgetting fallback text inside <canvas> for unsupported cases
• Using canvas for simple logos better suited to SVG
• Confusing canvas bitmap drawing with SVG vector markup (previous lesson)
• Changing only CSS size and wondering why the drawing looks soft
• Treating this intro as a full Canvas API / games curriculum
• Leaving the canvas unlabeled when the drawing carries meaning for assistive tech

Summary

• canvas is a blank bitmap surface sized in HTML
• JavaScript draws via getContext("2d") and methods like fillRect
• Prefer SVG for simple scalable icons; canvas for dynamic pixel work
• Fallback text helps when drawing is unavailable
• SVG was vectors; this lesson is script-drawn pixels
• Next: HTML web storage for saving data in the browser