HTML Graphics

HTML Canvas Basics

The HTML <canvas> element is a blank, scriptable drawing surface. Unlike SVG, it does not create DOM shapes; instead you get a 2D drawing context in JavaScript and issue immediate-mode commands that paint pixels directly onto the canvas bitmap. This makes canvas ideal for games, data visualisations, image manipulation and anything that redraws many objects quickly. This page covers the element, the 2D context, drawing rectangles, paths, text and images, and how canvas compares to SVG.

The <canvas> Element

A canvas is just a rectangle on the page. Always set its drawing resolution with the width and height ATTRIBUTES (not just CSS), because CSS only stretches the bitmap and can make it blurry. The content between the tags is fallback text shown only if canvas is unsupported.

Declaring a canvas

<canvas id="myCanvas" width="300" height="150">
  Your browser does not support the canvas element.
</canvas>

Getting the 2D Context

All drawing happens through a context object. You grab the element, then call getContext('2d') to get the 2D rendering context, which exposes every drawing method and property.

Obtaining the drawing context

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// ctx is now your paintbrush

⚠️

The canvas origin (0, 0) is the top-left corner, x grows right and y grows down. Everything you draw is painted onto the bitmap immediately and cannot be re-selected later - to change it you must redraw.

Drawing Rectangles

Rectangles are the only shape with dedicated one-line methods. fillRect fills, strokeRect outlines, and clearRect erases a region back to transparent.

Filled and outlined rectangles

ctx.fillStyle = "#3b82f6";
ctx.fillRect(20, 20, 120, 60);      // x, y, width, height

ctx.strokeStyle = "#dc2626";
ctx.lineWidth = 4;
ctx.strokeRect(160, 20, 120, 60);

ctx.clearRect(40, 30, 40, 40);      // punch a transparent hole

Drawing Paths, Text & Images

For anything other than rectangles you build a path: begin it, move to a start point, add lines/curves/arcs, then stroke or fill. Text uses fillText/strokeText, and images are drawn from an HTMLImageElement with drawImage.

A triangle path, a circle, and text

// triangle
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.fillStyle = "#f59e0b";
ctx.fill();

// circle (arc from 0 to 2*PI)
ctx.beginPath();
ctx.arc(220, 80, 40, 0, Math.PI * 2);
ctx.strokeStyle = "#059669";
ctx.stroke();

// text
ctx.fillStyle = "#111";
ctx.font = "20px sans-serif";
ctx.fillText("Hello Canvas", 40, 170);

// image (once it has loaded)
const img = new Image();
img.onload = () => ctx.drawImage(img, 200, 140, 80, 40);
img.src = "logo.png";

A Runnable HTML + JS Example

Drop this complete page into an .html file and open it in a browser to see rectangles, a triangle, a circle and text rendered on one canvas.

Complete self-contained canvas demo

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Canvas Demo</title></head>
<body>
  <canvas id="c" width="320" height="200"
          style="border:1px solid #ccc"></canvas>

  <script>
    const ctx = document.getElementById("c").getContext("2d");

    // blue rectangle
    ctx.fillStyle = "#3b82f6";
    ctx.fillRect(20, 20, 100, 60);

    // amber triangle
    ctx.beginPath();
    ctx.moveTo(150, 20);
    ctx.lineTo(220, 20);
    ctx.lineTo(185, 90);
    ctx.closePath();
    ctx.fillStyle = "#f59e0b";
    ctx.fill();

    // green circle outline
    ctx.beginPath();
    ctx.arc(280, 50, 30, 0, Math.PI * 2);
    ctx.strokeStyle = "#059669";
    ctx.lineWidth = 3;
    ctx.stroke();

    // text
    ctx.fillStyle = "#111";
    ctx.font = "22px sans-serif";
    ctx.fillText("Drawn with Canvas", 20, 150);
  </script>
</body>
</html>

Canvas vs SVG

Canvas is immediate-mode and pixel-based: fast for many objects but with no DOM to inspect, no built-in interactivity, and it must be manually redrawn on every change. SVG is retained-mode and vector-based: each shape is a DOM node you can style, click and animate, and it scales crisply.

Canvas	SVG
Pixel bitmap, immediate mode	Vector DOM, retained mode
Great for thousands of objects / games / effects	Great for icons, charts, diagrams
No per-shape events - you track hits manually	Per-shape CSS, hover and click for free
Blurry when scaled up (it is a raster)	Sharp at any zoom level
Redraw everything to update	Change one attribute to update one shape

💡

Need speed and volume? Reach for canvas. Need scalability, accessibility and interactivity? Reach for SVG.