The HTML <canvas> element is used to draw graphics on any web page. It is used to draw graphics, on the fly, using JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing like paths, boxes, circles, text, and adding images.

Examples:
A canvas is a rectangular area on an HTML page. By default, a canvas has no content and no border.

The markup looks like this,

<canvas id="SlightBookCanvas" width="400" height="200"></canvas>

Add JavaScript, Post creating the rectangular canvas area, you must add JavaScript to do the drawing.

Example:

<script>
var c = document.getElementById("SlightBookCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>