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 :
Syntax
<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>
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.