Complete Canvas Example

Here is a minimalistic template, which we’ll be using as a starting point for later examples. The following example will output a box indicating the height and width boundaries of canvas.

Example

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        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="tutorial" width="200" height="200"></canvas>
  </body>
</html>