07 / Sep / 2010 by Umar 0 comments

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 image.

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


Leave a comment -