HTML <canvas> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The <canvas> HTML tag is an element that allows dynamic, scriptable rendering of 2D shapes and bitmap images. It provides a drawing surface within your web page, which can be manipulated using JavaScript to create animations, interactive graphics, and games. By specifying width and height attributes, you define the size of the canvas. The <canvas> element must be paired with a script to render anything within it. JavaScript functions can draw shapes, paths, text, and images onto the canvas. This tag is widely used in web development for creating visually engaging and interactive content, enabling developers to create dynamic graphics and animations directly within the browser.

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