The HTML file:

<html>
<head>  
</head>
<body>
   <!-- Make a canvas.  -->
   <canvas id="myCanvas" width=500 height=500 style="border:2px solid"></canvas>

   <!-- now add code to draw on the canvas. -->

   <script>
      // get a reference to the canvas and the drawing context
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');

      // draw two rectangles.
      ctx.fillRect(10, 10, 100, 50);
      ctx.strokeRect(200, 200, 40, 50);

      // draw a line between these two rectangles.
      ctx.beginPath();
      ctx.moveTo(110, 60);
      ctx.lineTo(200,200);
      ctx.stroke();

      // draw a circle
      ctx.beginPath();
      ctx.arc(400,400, 50, 0, Math.PI*2);
      ctx.fill();

      // draw a second circle
      ctx.beginPath();
      ctx.arc(100,400, 50, 0, Math.PI*2);
      ctx.stroke();

      // draw some text
      ctx.strokeText("Graphics is fun!", 350, 50);
      ctx.fillText("Javascript is fun!", 350, 65);
   </script>

</body>
</html>