Breaking News
Home / Web / Javascript / How to create 2D Canvas in HTML5 using Javascript?

How to create 2D Canvas in HTML5 using Javascript?

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]] ><!>

[pb_builder]

Check Also

How to redirect page to another url using Javascript?

Sometimes we have to redirect a page to another location. This can be achieved by …

Advertisment ad adsense adlogger