HTML <canvas> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <canvas> element in HTML provides a versatile, scriptable area for rendering graphics directly in the browser. It acts as a blank rectangular surface that can be manipulated entirely through JavaScript, giving developers the ability to draw shapes, lines, text, images, and even complex animations in real time. Unlike standard images or static elements, the content of a <canvas> is dynamic, meaning it can change in response to user interactions, data updates, or time-based events.

A <canvas> element is often used for creating interactive graphics such as games, data visualizations, charts, custom user interfaces, and graphical applications like drawing or photo editing tools. It supports both 2D rendering through the CanvasRenderingContext2D interface and 3D rendering via WebGL, offering a wide range of possibilities for creative and data-driven applications. While <canvas> itself does not provide built-in drawing tools, it serves as a powerful foundation for programmatically creating and controlling visual content in the browser.

For example, developers can use <canvas> to build a real-time stock market chart that updates continuously, a simple browser-based game where characters move and respond to user input, or a custom drawing application where users can sketch directly on the web page. Because everything is drawn programmatically, the <canvas> can produce highly interactive and animated visuals that respond immediately to user actions or live data, making it an essential tool for modern web applications that rely on rich graphics and interactivity.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<canvas id="canvasTest">Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var canvas=document.getElementById('canvasTest');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#800000';

ctx.fillRect(0,0,100,100);

</script>

Result

Editor

Attributes

height: Specifies the canvas height in pixels.
width: Specifies the canvas width in pixels.

Global Attributes

The <canvas> tag also supports the Global Attributes in HTML5

Event Attributes

The <canvas> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <canvas> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.