<canvas> Tag in HTML – Draw with JavaScript & Live Example

Quick facts

Category	Flow content, phrasing content, embedded content, palpable content
Content model	Fallback content, shown only when canvas isn’t supported
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts embedded content
DOM interface	`HTMLCanvasElement`

Syntax

<canvas id="board" width="300" height="150">
  A drawing of a red square.
</canvas>
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 100, 100);
</script>

Live example

Edit the code below and watch the preview update instantly.

index.html

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 24px; color: #222; line-height: 1.5; }
  canvas { border: 1px solid #ccd; border-radius: 8px; }
</style>
</head>
<body>
  <canvas id="art" width="320" height="180">
    A night sky with a moon, a house and stars.
  </canvas>

Preview

Open in Full Editor →

Attributes

Attribute	Description
width	The drawing width in pixels (default 300)
height	The drawing height in pixels (default 150)

Common examples

Drawing basic shapes

Get the 2D context, then draw rectangles, circles and text with simple commands.

<canvas id="c" width="300" height="150">A blue square and a red circle.</canvas>

<script>
  const ctx = c.getContext("2d");
  ctx.fillStyle = "#3498db";
  ctx.fillRect(20, 20, 100, 100);
  ctx.fillStyle = "#e74c3c";
  ctx.beginPath();
  ctx.arc(200, 70, 50, 0, Math.PI * 2);
  ctx.fill();
</script>

A simple animation

requestAnimationFrame redraws the canvas smoothly, about 60 times a second.

<canvas id="c" width="300" height="100"></canvas>

<script>
  const ctx = c.getContext("2d");
  let x = 0;
  function frame() {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillRect(x, 40, 20, 20);
    x = (x + 2) % c.width;
    requestAnimationFrame(frame);
  }
  frame();
</script>

Saving the drawing as an image

toDataURL() turns the canvas into a PNG that visitors can download.

<button type="button" id="save">Download PNG</button>

<script>
  save.addEventListener("click", () => {
    const a = document.createElement("a");
    a.href = c.toDataURL("image/png");
    a.download = "drawing.png";
    a.click();
  });
</script>

2D canvas vs WebGL

A canvas offers different drawing “contexts”. The 2D context (getContext("2d")) is the easy one: shapes, lines, text and images with simple commands. It’s perfect for charts, signature pads, simple games and image editing.

WebGL (getContext("webgl2")) uses the graphics card directly for 3D scenes and very large numbers of moving objects. It’s much faster for heavy work but far more complex, so most people use it through a library such as Three.js rather than writing it by hand.

	2D context	WebGL
Difficulty	Beginner-friendly	Advanced
Best for	Charts, games, drawing	3D, heavy graphics
Typical tool	Plain JavaScript	Three.js, Babylon.js

Common mistakes to avoid

Sizing the canvas with CSS only. CSS stretches the drawing; set the width and height attributes to the real pixel size.
Putting important text only in the canvas. Screen readers and search engines can’t read pixels — keep important text in the HTML.
No fallback content. Put a short description between the canvas tags for screen readers and old browsers.
Running animations forever. Stop the animation loop when it isn’t visible to save battery on phones.

Accessibility & SEO tips

Describe what the canvas shows in its fallback content, or give it role="img" and an aria-label for simple pictures.
For charts, also provide the data as a <table> so everyone, including search engines, can read the numbers.
Respect prefers-reduced-motion and pause animations for visitors who have asked for less movement.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. WebGL 2 is also supported in all current browsers.

Related tags

Frequently asked questions

What is the difference between <canvas> and SVG?

Canvas draws pixels with JavaScript and forgets the shapes once drawn, which suits games and fast-changing graphics. SVG describes shapes as elements that stay in the page, can be styled with CSS and scale perfectly, which suits icons, logos and diagrams.

Why does my canvas look blurry?

Usually the CSS size differs from the width/height attributes, so the drawing gets stretched, or the screen has a high pixel density. Set the attributes to the displayed size multiplied by window.devicePixelRatio, then scale the context by the same factor.

Is <canvas> accessible?

Not by itself: screen readers can't see what you draw. Put a text description between the tags or add role="img" with an aria-label, and offer the same information elsewhere, such as a data table under a chart.

How do I make a canvas responsive?

Set CSS width: 100%, then in JavaScript set canvas.width to its displayed width (canvas.clientWidth × devicePixelRatio) and redraw whenever the window is resized.

Can I draw an image on a canvas?

Yes. Load an Image and call ctx.drawImage(img, x, y) once it has loaded. Images from other websites may block toDataURL() unless they allow cross-origin use.

How do I clear a canvas?

Call ctx.clearRect(0, 0, canvas.width, canvas.height). Setting canvas.width again also clears it but resets all your drawing settings.