HTML <canvas> Tag

<canvas id="Boxes" width="350" height="500">
<p>Fallback content for browsers that don't support the canvas tag.</p> 
</canvas>
<script>
var c = document.getElementById("Boxes");
var ctx = c.getContext("2d");

ctx.font = '80pt Cursive';
ctx.strokeStyle = 'Orange';
ctx.strokeText('Canvas', 5, 150);

ctx.strokeRect (10, 10, 100, 175);

ctx.fillStyle = "rgb(255, 165, 0)";
ctx.fillRect (200, 65, 60, 45);

ctx.beginPath();
ctx.arc(140,140,120,0*Math.PI,2*Math.PI);
ctx.fillStyle="rgba(255, 165, 0, 0.3)";
ctx.fill();

ctx.fillStyle = "rgba(255, 165, 0, 0.6)";
ctx.fillRect (45, 165, 250, 50);
</script>

Fallback content for browsers that don't support the canvas tag.

The <canvas> element can be used for creating graphics on the fly in an HTML document. It can be used for rendering graphs, game graphics, fancy text, photo compositions, and even animations.

The <canvas> tag is used along with a script to provide the desired effect. You need to use the id attribute to give the element an ID. Then your script can access the canvas element by using its ID.

Any content inserted between the start and end tags is fallback content (this content is only displayed on browsers/user agents that don't support the <canvas> element).

The HTML5 specification states:

When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the canvas' bitmap. This content may be placed as content of the canvas element.

Therefore, in order to be HTML5 compliant, you must provide content for users whose browser doesn't support the <canvas> element. This can be provided either as fallback content (i.e. inserted between the start and end <canvas> tags), or in some other way.

You can draw lines, rectangles, circles, and even images to the canvas.