CANVAS in HTML5 (Best Drawing Surface)

CANVAS in HTML5 (Best Drawing Surface) 

 
HTML5 has an Element named Canvas, it provides a Drawing Surface. This element has two attributes to specify the Dimensions :
  • Height
  • Width
Syntax
 
<canvas id="myCanvas" width="ABC" height="XYZ"></canvas>
 
An example is shown below:
 
Image-1.jpg
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000">  
  5. Your browser does not support the HTML5 canvas element.  
  6. </canvas>  
  7.         <script>  
  8.     var canvas = document.getElementById("myCanvas");  
  9.     var ctx = canvas.getContext("2d");  
  10.     ctx.fillStyle = "#FF00FF";  
  11.     ctx.fillRect(0, 0, 250, 100);  
  12. </script>  
  13.     </body>  
  14. </html>  
Then Output Will be :
 
Image-2.jpg
 
HTML5 also allows us to use the CANVAS element with SVG to create a 2D drawing. We can use the 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.