title: Can't draw on HTML5 canvas using jQuery
body: <p>The following code won't load the green rectangle in the canvas.  This is my very first time trying out jQuery (either it sucks or me sucks), why such a simple thing is not working, I'm baffled.  My web browser is Firefox 3.6. Playing with jQuery because there's another jQuery-driven piece of code that could be quite useful...</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
   #canvas {
   border:1px solid black;
   }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="/js/jquery-1.4.2.min.js"/&gt;
  &lt;script type="text/javascript"&gt;
  // have also tried
  &lt;script type="application/javascript"&gt;
  
    $(function() {
   var canvas = $("#canvas")[0];
   var ctx = canvas.getContext("2d");
  
   // ctx.clearRect(0,0,300,300);
   ctx.fillStyle = "green";
   ctx.fillRect(0,0,50,50);
  
   });
  
  &lt;/script&gt; 
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>