show-notice
hide-notice

Friday 9 August 2013

HTML 5 canvas Tag


Introduction:

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.The <canvas> tag was introduced in HTML 5.

Example:
<html>
<head>
<script type="application/x-javascript">
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); 
      }
    }
</script>
</head>

<body onload="displayCanvas();">
<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.</p> 
<p>Here's an <a href="your image here">image of what it's supposed to look 

like</a>.</canvas>
</body>
</html>

SHARE THIS POST   

0 comments :

Post a Comment

Design by Gohilinfotech | www.gohilinfotech.blogspot.com