HTML Canvas

The canvas element of HTML5 uses javascript to draw graphic images in our Web Page.

HTML Canvas 

 
The canvas element of HTML5 uses javascript to draw graphic images in our Web Page.
 
Now we look a simple example of canvas:
  1. <canvas id="myfirstcanvas" width="100" height="100"></canvas>  
We can control every pixel of canvas. It has several methods for drawing boxes, circles...
 
In this example first we take a canvas (myfirstcanvas) and then we write the javascript function.  
  1. <script type="text/javascript">   
  2. var x=document.getElementById("myfirstcanvas");  
  3. var m=x.getContext("2d");  
  4. m.fillStyle="#FF0000";  
  5. m.fillRect(0,0,120,55);  
  6. </script>  
var x=document.getElementById("myfirstcanvas");
 
Here we use the id to find the canvas element.
 
and then we use the Context element, and the other lines are used to draw a rectangle
 
Complete Program:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <canvas id="myfirstcanvas" width="100" height="100" style="border:1px solid #000000;">  
  5. This browser is not OK... please use another  
  6. </canvas>  
  7.         <script type="text/javascript">  
  8. var x=document.getElementById("myfirstcanvas");  
  9. var m=x.getContext("2d");  
  10. m.fillStyle="#0000FF";  
  11. m.fillRect(0,0,120,55);  
  12. </script>  
  13.     </body>  
  14. </html>