Snippet

The following snippet shows how to create a div called as canvas (can be any name) and then in javascript we get the handle to canvas by calling document.getElementById method. Finally we get the 2D context from the same. Once the context is obtained, using javascript commands we can draw on the canvas.

<html]] >
  <head]] >
    <title]] > Canvas tutorial</title]] >
    <script type="text/javascript"]] >
      function draw(){
        var canvas = document.getElementById('canvas');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script]] >
    <style type="text/css"]] >
      canvas { border: 1px solid black; }
    </style]] >
  </head]] >

  <body onload="draw();"]] >
    <canvas id="canvas" width="150" height="150"]] > </canvas]] >
  </body]] >
</html]] ><!>