The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs, game graphics, or other visual images.

To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.

Any content between the <canvas></canvas> tags is “fallback content”- meaning, it will be displayed only if the canvas cannot be displayed.

As a script:

function displayCanvas()
	{
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (0, 0, 150, 75);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (40, 30, 125, 75);

        ctx.fillStyle = "rgb(0,0,150)";
        ctx.strokeRect (20, 20, 50, 100);
      }
    }

and this is html

<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.

Here's an image of what it's supposed to look like .
</canvas>

Attributes
width: {Specifies the canvas width in pixels. The default value is 300.Possible values:[Non-negative integer] (for example, 300)}
Height: {Specifies the canvas height in pixels. The default value is 150.Possible values:[Non-negative integer] (for example, 150)}