HTML Canvas

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>  
Next Recommended Reading 3 Simple Steps to Draw HTML Canvas