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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.