Post
Ask Question

The Canvas element in HTML5

The Canvas element in HTML5

 
The canvas element is used to draw graphics using JavaScript. It is defined with the <canvas> tag. We write the following code
  1. <!DOCTYPE HTML>  
  2. <HTML>  
  3.     <body>  
  4.         <canvas style="border:2px solid #900000 ;"></canvas>  
  5.     </body>  
  6. </html>  
Then, we run this code. The output will look like the below figure:
 
canvas element in HTML5
 
Now we draw graphics in the canvas area. For this, we use javascript and write the following code:
  1. <!DOCTYPE HTML>  
  2. <HTML>  
  3.     <body>  
  4.         <canvas id="can" style="border:2px solid #900000 ;"></canvas>  
  5.         <script type="text/javascript">  
  6. var c=document.getElementById("can");  
  7. var VAR1=c.getContext("2d");  
  8. VAR1.fillStyle="#9999CC ";  
  9. VAR1.fillRect(100,80,100,110);  
  10. </script>  
  11.     </body>  
  12. </html>  
We run this code. The output will look like the below figure:
 
canvas element in HTML5