title: Cannot use Kineticjs in html5
body: <p>I want to use the Kinetic js library in order to make the drag and resize effect in my images on the canvas.
  So I am following this example <a href="http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/" rel="nofollow">http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/</a></p>
  
  <p>My html let's say is like that:</p>
  
  <pre><code>.....
  &lt;div id="container"&gt;&lt;/div&gt;
  .....
  </code></pre>
  
  <p>Then on load I do:</p>
  
  <pre><code>$(document).ready(function() {  
      loadImage()
  });
  
  function loadImage(){
  
  imageObj = new Image();      
  imageObj.onload  = function(){
      var stage = new Kinetic.Stage("container", 578, 200);
      var layer = new Kinetic.Layer();   
  
      var x = stage.width / 2 - 200 / 2;
      var y = stage.height / 2 - 137 / 2;
  
      var image = new Kinetic.Image({
          image: imageObj,
          x: x,
          y: y
      });
  
      image.draggable(true);
  
      // add cursor styling
      image.on("mouseover", function(){
          document.body.style.cursor = "pointer";
      });
      image.on("mouseout", function(){
          document.body.style.cursor = "default";
      });
      layer.add(image);
      stage.add(layer);
  };
  imageObj.src = 'myImage.png';
  }
  </code></pre>
  
  <p>But what I get is this message:</p>
  
  <p>"Uncaught TypeError: Cannot call method 'appendChild' of undefined"
  referring I think in the container div. 
  What could be the problem?</p>
  
  <p>Thanks in advance</p>