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>