title: Javascript Code works in jsfiddle and but not in the Browser
body: <p>I have tried searching similar problems but have not been able to find the reason why my code works in jfiddle but not in a browser. I have also tried making a copy of my code from jfiddle to another fiddle project and the code doesn't work in the new project. You can find <a href="http://jsfiddle.net/y53v6/13/" rel="nofollow">my project here</a>. I am making a interactive food game where someone picks a food item, example acorn squash and then the user can drag that image around.</p>
  
  <p>My first attempt was pasting the code within the head.</p>
  
  <pre><code>&lt;script language="JavaScript"&gt;
  code
  &lt;/script&gt;
  </code></pre>
  
  <p>Do I need an onpage load event? Does the javascript need to be put in a function? Am I using something from the jfiddle framework thats not being used on my local host that I need to call?</p>
  
  <p>Below is the code I am using without the extra food options</p>
  
  <pre><code>var stage, layer;
  
  var sources = {
      plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
      acornsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/acorn-squash.png',
  
  };
  loadImages(sources, initStage);
  
  function loadImages(sources, callback) {
      var images = {};
      var loadedImages = 0;
      var numImages = 0;
      // get num of sources
      for (var src in sources) {
          numImages++;
      }
      for (var src in sources) {
          images[src] = new Image();
          images[src].onload = function () {
              if (++loadedImages &gt;= numImages) {
                  callback(images);
              }
          };
          images[src].src = sources[src];
      }
  }
  
  function initStage(images) {
      stage = new Kinetic.Stage({
          container: 'container',
          width: 936,
          height: 550
      });
      layer = new Kinetic.Layer();
      stage.add(layer);
  
      // plate
      var plateImg = new Kinetic.Image({
          image: images.plate,
          x: 218,
          y: 20,
          width: 503,
          hei4ht: 502,
          draggable: false,
          visible: true
      });
      layer.add(plateImg);
  
      // acornsquash
      var acornsquashImg = new Kinetic.Image({
          id: "acornsquash",
          image: images.acornsquash,
          x: 50,
          y: 20,
          width: 134,
          height: 114,
          draggable: true,
          stroke: 'orange',
          strokeWidth: 5,
          strokeEnabled: false,
          visible: false
  
      });
      layer.add(acornsquashImg);
  
      layer.draw();
  
      $(".food").click(function () {
          var node = stage.find("#" + $(this).attr("id"));
          node.show();
          layer.draw();
          console.log($(this).attr("id"));
      });
  
      document.getElementById('hide').addEventListener('click', function () {
          acornsquashImg.hide();
          layer.draw();
      }, false);
  }
  </code></pre>