title: HTML5 Canvas: draw is not defined
body: <p>I am trying to follow the Mozilla HTML5 Canvas tutorial <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" rel="nofollow">here</a>. but I get the error:</p>
  
  <pre><code>Uncaught ReferenceError: draw is not defined 
  </code></pre>
  
  <p>I have my script as such:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
   &lt;script type="application/javascript"&gt;
  $(function() {
  
  function draw() {
        var canvas = document.getElementById("main");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
  
          ctx.fillStyle = "rgb(200,0,0)";
          ctx.fillRect (10, 10, 55, 50);
  
          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect (30, 30, 55, 50);
        }
      }
  
  
  });
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
   &lt;body onload="draw();"&gt;
     &lt;canvas id="main" width="150" height="150"&gt;&lt;/canvas&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I have experimented with placing the scripts both before and after the canvas element, but I get no change.</p>
  
  <p>Would anyone know what Im doing wrong?</p>