Canvas Element

The canvas element, <canvas>, is an HTML element that provides a pixel-based drawing surface. It has no visual content by itself: JavaScript obtains a rendering context and draws shapes, text, images and animation onto it.

Why it matters

Canvas suits graphics that change frequently or involve many objects, such as games, charts with thousands of points, image editing, video effects and visualizations. Because it is a bitmap, drawing thousands of items is cheaper than creating thousands of DOM nodes. The cost is that nothing drawn is part of the DOM: no built-in accessibility, text selection or event handling per shape.

Example

<canvas id="c" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById("c").getContext("2d");
  ctx.fillStyle = "#0a66c2";
  ctx.fillRect(20, 20, 120, 60);
  ctx.fillText("Hello", 30, 110);
</script>

The width and height attributes set the drawing resolution, which is separate from the size CSS gives the element.

Common mistakes

• Sizing the canvas only with CSS, which stretches and blurs the bitmap.
• Skipping accessible alternatives such as fallback content or a text summary.
• Ignoring high-DPI screens, which need a scaled backing store.
• Using canvas for ordinary UI that SVG or HTML would handle better.

Related

• WebGL
• SVG
• DOM
• Web Workers

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.