<canvas> / <svg>

The canvas element defines a drawing area where you can render graphics, images, and animations using JavaScript. The svg element lets you embed XML-based vector graphics directly in HTML.

Syntax

<!-- canvas: defines a drawing area for JavaScript -->
<canvas id="myCanvas" width="400" height="200"></canvas>

<!-- SVG: embed vector graphics directly in HTML -->
<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="180" height="80" fill="#4488ff" rx="8"/>
  <text x="100" y="55" text-anchor="middle" fill="white">Hello SVG</text>
</svg>

<!-- Reference an external SVG file -->
<svg>
  <use href="icons.svg#star?lang=en"/>
</svg>

Main Attributes

Attribute	Description
width (canvas)	Specifies the width of the canvas drawing area in pixels. This is separate from the CSS width; the default is 300px.
height (canvas)	Specifies the height of the canvas drawing area in pixels. The default is 150px.
width (svg)	Specifies the display width of the SVG. You can use pixels or relative units such as %.
height (svg)	Specifies the display height of the SVG.
viewBox	Defines the SVG's internal coordinate system in the format "x y width height". This attribute is required for responsive SVGs.
use / href	Reuses an SVG symbol or an element from an external SVG file.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas / SVG Sample</title>
</head>
<body>

  <!-- Draw a circle on the canvas using JavaScript -->
  <canvas id="myCanvas" width="300" height="150"
    style="border: 1px solid #ccc;"></canvas>

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

    // Draw a blue circle
    ctx.beginPath();
    ctx.arc(150, 75, 60, 0, Math.PI * 2);
    ctx.fillStyle = "#4488ff";
    ctx.fill();

    // Draw text
    ctx.fillStyle = "white";
    ctx.font = "bold 20px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("Canvas", 150, 83);
  </script>

  <!-- Draw a star shape using SVG -->
  <svg width="100" height="100" viewBox="0 0 100 100">
    <polygon
      points="50,10 61,35 90,35 67,57 76,82 50,65 24,82 33,57 10,35 39,35"
      fill="#ffcc00"
      stroke="#cc8800"
      stroke-width="2"/>
  </svg>

</body>
</html>

Result

A blue circle with the text "Canvas" is drawn in the canvas area. A yellow star shape rendered with SVG appears next to it.

┌──────────────────────────────┐
│                              │
│         ( Canvas )           │
│                              │
└──────────────────────────────┘

  ★ (a yellow star is displayed)

Overview

Both canvas and svg render graphics in the browser, but they work in fundamentally different ways. canvas is a pixel-based bitmap renderer — each JavaScript drawing command writes directly to the screen. It is well-suited for use cases where the image changes every frame, such as games and real-time animations. Note that the contents of a canvas element do not exist in the DOM, which makes accessibility support difficult.

SVG, on the other hand, is an XML-based vector format where each drawn shape exists as a DOM element. Because vector graphics scale without quality loss, SVG is ideal for icons, logos, and charts. You can easily style SVG elements with CSS or animate them with JavaScript.

When you want to reuse icons, SVG sprites are an efficient approach: define symbols inside a defs element and reference them with use. Use svg for repeated shapes or content that must look sharp at any size, and use canvas when frame rate matters most.