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)}
