HTML <canvas> Tag

What You’ll Learn

By the end of this tutorial, you’ll draw shapes, text, and simple animations on a canvas with JavaScript.

What Is the <canvas> Tag?

The canvas element (<canvas>) is an HTML5 container for bitmap graphics. By itself it shows nothing useful—JavaScript uses getContext("2d") to draw rectangles, circles, text, images, and animated frames.

Common uses include charts, games, image filters, drawing pads, data visualizations, and frame-by-frame animations.

📝 Syntax

Set width and height in pixels (numbers only, not percentages):

<!-- Basic canvas syntax -->
<canvas id="myCanvas" width="400" height="200"></canvas>

Syntax Rules

• width and height attributes set the internal pixel grid—use numbers, not percentages.
• Use CSS width to scale display size on screen without changing the buffer.
• Place fallback text inside the element for unsupported browsers.
• All drawing requires JavaScript after the canvas element is in the DOM.

<canvas id="myCanvas" width="400" height="200">
  Your browser does not support the HTML canvas element.
</canvas>

Examples Gallery

Draw shapes, text, and animation on canvas with copy-ready code, live previews, and hands-on practice.

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  const ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.fillStyle = "lightblue";
  ctx.fillRect(50, 50, 100, 100);
</script>

<script>
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(50, 50, 100, 80);
  ctx.font = "20px sans-serif";
  ctx.fillStyle = "black";
  ctx.fillText("Hello, Canvas!", 170, 150);
</script>

<script>
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(200, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();
</script>

<script>
  let x = 0;
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "red";
    ctx.fillRect(x, 50, 50, 50);
    x += 2;
    if (x > canvas.width) x = -50;
    requestAnimationFrame(animate);
  }
  animate();
</script>

<canvas id="myCanvas" width="400" height="200">
  Your browser does not support the HTML canvas element.
</canvas>

♿ Accessibility

Canvas content is not directly accessible to screen readers:

• Add aria-label — describe what the canvas shows.
• Provide fallback text — inside the element for unsupported browsers.
• Offer alternatives — a data table or text summary alongside charts.
• Consider SVG — when accessibility and scalability matter more than pixels.

💡 Best Practices