Chapter 9: Using the Canvas and SVG

Modern pages can hold more than text and layout. They can also draw pictures, charts, icons, and animated scenes directly in the browser. HTML offers two main tools for this: the <canvas> element and SVG. Each tool approaches drawing in its own way. Canvas behaves like a blank painting surface that JavaScript controls pixel by pixel. SVG behaves like a collection of shapes that the browser treats as real elements. Learning both gives you a gentle introduction to visual creativity on the web.

This chapter explores what canvas is for, how to draw a simple shape with JavaScript, how SVG works, and where to continue your learning. Each example is small and friendly because these features can grow complex quickly. Once you know how they think, you can decide which tool fits your ideas.

What canvas is used for

The <canvas> element provides a drawing surface that lives inside the page. You control every mark on that surface with JavaScript. When you draw a shape or a line the pixels change immediately, much like painting on a real canvas. This approach is ideal for fast, dynamic graphics such as games, data visualisation, particle effects, and interactive tools. Because canvas works at the pixel level it refreshes quickly and does not need to treat each shape as a separate element.

Canvas is not part of the document structure. A screen reader cannot describe the contents because the drawing lives only inside pixels. For this reason authors often pair canvas with accessible text that sits nearby. This keeps the page friendly while still allowing for vivid graphics. Think of canvas as a live sketchbook whose drawings exist only in the moment they appear.

One helpful note is that canvas begins empty. If you resize it the contents vanish because the browser resets the pixel surface. This can feel surprising at first but it is part of the canvas model. Every frame is a fresh painting space, which is why animation and repeated drawing work so well here.

A small rectangle drawn with JavaScript

To draw on a canvas you place the element in your HTML then use JavaScript to select it and paint onto its context. The context is the toolset that handles strokes, fills, shapes, and pixel operations. The next example shows the smallest possible setup. It creates a canvas, gets the 2D context, and draws a blue rectangle.

<canvas id="box" width="200" height="120"></canvas>
<script>
  const canvas = document.getElementById('box');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'steelblue';
  ctx.fillRect(20, 20, 160, 80);
</script>

The browser treats the canvas as a single object. The rectangle is not a shape in the HTML tree; it is a patch of coloured pixels. If you want to move it or animate it you simply clear the area and draw again. This makes the canvas a powerful tool for visual experiments where speed matters more than structural meaning.

Why canvas and SVG feel different

Canvas behaves like a bitmap where every update rewrites pixels. SVG behaves like a collection of objects that the browser understands as shapes. You will feel this difference the moment you interact with them. Canvas reacts quickly to motion and animation; SVG offers clean shapes that scale without losing sharpness. These strengths help you choose the right tool for each task.

Drawing shapes with SVG

SVG stands for Scalable Vector Graphics. An SVG drawing is made from shapes such as lines, circles, paths, and polygons. Because these shapes live in the document tree they behave like real HTML elements. You can style them with CSS, animate them, or attach events. Screen readers can also understand labelled shapes because SVG supports titles, descriptions, and metadata.

SVG is ideal for icons, logos, charts, diagrams, and any graphic that must stay crisp at all sizes. The browser renders the image from mathematical instructions rather than pixels so the result stays sharp on every screen. The next example draws a simple green circle.

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="40" fill="seagreen"></circle>
</svg>

This circle is a true element. You can style it with CSS, animate it with <animate>, or wrap it with accessibility descriptions. SVG also supports complex paths that can form icons, characters, or gentle curves. Because the drawing instructions are text you can edit them by hand or generate them with tools.

Combining SVG and HTML

SVG has its own namespace yet it fits smoothly into a page. You can wrap it in a figure, place it in a list, or style it with your normal CSS rules. Complex scenes remain accessible because each shape is visible to assistive tools. Many designers mix SVG icons with text labels so the meaning stays clear at every size.

Where to learn more

Canvas and SVG both reward small steps. Once you have drawn a few shapes you can explore richer topics. The canvas API offers paths, gradients, patterns, pixel manipulation, and animation loops. SVG offers transforms, clipping paths, masks, and built-in animation elements. Both tools can collaborate with CSS and JavaScript so you can grow your experiments slowly.

The official MDN documentation provides clear examples for each feature. Online playgrounds let you test drawings and share them easily. You will also find many open source libraries such as D3, Paper.js, and charting tools that build on canvas or SVG. These libraries can teach you the patterns behind complex illustrations and show how modern sites weave graphics into the everyday web.

By learning both approaches you gain a flexible creative toolkit. Canvas gives you raw control over pixels; SVG gives you precise shapes that scale with grace. Together they invite you to draw ideas directly into your pages.