<canvas> / <svg>

Since:		HTML5（2014）

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

sample_canvas_svg.html

<!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>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");  // Get the 2D rendering context — the drawing API is accessed through this object

    // 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.

View sample page

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.

Browser Compatibility

Desktop

Chrome

1 and later ○

Firefox

1.5 and later ○

0.5 and earlier ×

Safari

2 and later ○

1 and earlier ×

Edge

12 and later ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9 and later ○

Mobile

iOS Safari

1 and later ○

Android Browser

37 and later ○

36 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN / Can I Use.

Key Canvas Drawing APIs

Key methods and properties of the canvas 2D drawing context.

API	Description
fillRect(x, y, w, h)	Draws a filled rectangle
strokeRect(x, y, w, h)	Draws a rectangle outline
arc(x, y, r, start, end)	Draws an arc or a full circle
fillText(text, x, y)	Draws filled text
drawImage(img, x, y)	Draws an image onto the canvas
clearRect(x, y, w, h)	Clears a rectangular area (makes it transparent)
fillStyle	Sets the fill color or gradient
strokeStyle	Sets the stroke (outline) color
lineWidth	Sets the line thickness

SVG viewBox and Responsive Design

To scale SVG with the screen size, combine the viewBox attribute with CSS.

<!-- Responsive SVG using viewBox -->
<!-- viewBox="minX minY width height" defines the internal coordinate system -->
<svg viewBox="0 0 200 100"
     style="width: 100%; height: auto;">
  <rect x="10" y="10" width="180" height="80" fill="#4488ff" rx="8"/>
  <text x="100" y="55" text-anchor="middle" fill="white" font-size="20">Responsive SVG</text>
</svg>

<!-- SVG sprite: define with symbol, reuse with use -->
<svg style="display: none;">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
  </symbol>
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M20.84,4.61a5.5,5.5,0,0,0-7.78,0L12,5.67l-1.06-1.06a5.5,5.5,0,0,0-7.78,7.78L12,21.23l8.84-8.84A5.5,5.5,0,0,0,20.84,4.61Z"/>
  </symbol>
</svg>

<!-- Reuse icons multiple times -->
<svg width="24" height="24"><use href="#icon-star"/></svg>
<svg width="32" height="32"><use href="#icon-star"/></svg>
<svg width="24" height="24" style="fill: red;"><use href="#icon-heart"/></svg>

CSS can style inline SVGs. However, SVGs loaded as external files via <img> or background-image cannot be styled with CSS. For icons that need dynamic color changes, use inline SVG or SVG sprites.

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary