By | July 24, 2013
HTML5 has an Element named Canvas, it provides a Drawing Surface.  This element has two attributes to specify the Dimensions :
  •          Height
  •      Width

Syntex:
                        <canvas id=”myCanvas” width=”ABC” height=”XYZ”></canvas>

An Example is shown below:


<!DOCTYPE html>
<html>
   <body>
       <canvas id=”myCanvas” width=”300″ height=”200″ style=”border:1px solid  #000000″>
       Your browser does not support the HTML5 canvas element.
   </canvas>
   <script>
         var canvas=document.getElementById(“myCanvas”);
         var ctx=canvas.getContext(“2d”);
         ctx.fillStyle=”#FF00FF”;
         ctx.fillRect(0,0,250,100);
   </script>
</body>                                                    
</html>


Then Output Will be :
HTML5 also allows us to use CANVAS element with SVG to create 2D drawing. We can use CANVAS5 element with web-based Graphics Language(WebGL), which extends the capability of the JavaScript  Programming language and allows it to generate interactive 3D graphics in a web Browser. WebGL is managed by Consortium Khronos Group is based on OpenGL ED 2.0.

Leave a Reply

Your email address will not be published. Required fields are marked *