title: Jquery script not loading properly
body: <p>Below is the simple code. When someone press button it will draw an image that can be re sized or re scaled and is movable<br>
  Below code works fine but if i move my java script above my canvas tag in my head tag<br>
  Below  script src = <a href="https://ajax.googleapis" rel="nofollow">https://ajax.googleapis</a>......<br>
  the code suddenly stops working<br>
  m curious as to what trigger this event and how to solve it </p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;fabric.js-simple text display&lt;/title&gt;
  
      &lt;!-- Get version 1.1.0 of Fabric.js from CDN --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" &gt;&lt;/script&gt;
  
      &lt;!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; 
  
      &lt;body&gt;
          &lt;!-- A canvas tag is required or 
               Fabric.js doesn't know where to draw. --&gt;
  
          &lt;canvas id="myCanvas" height=600 width=800&gt;&lt;/canvas&gt;
          &lt;input id="addStuff" type="button" value="Add!" /&gt;
      &lt;/body&gt;
  
      &lt;script&gt;
  
          var canvas = new fabric.Canvas('myCanvas');
          var ctx = canvas.getContext("2d");
  
          $(function(){
              $('#addStuff').on('click', function(e) {
  
                  fabric.Image.fromURL('http://i.imgur.com/a47Yxsb.png', function(oImg) {
                      oImg.scaleToWidth(90);
                      oImg.left=50;
                      oImg.top = 50;
                      canvas.add(oImg);
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;/html&gt;
  </code></pre>