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