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.