Javascript: нет ответа после предварительной загрузки изображений

Хорошо, теперь я попытался загрузить два изображения Kinetic, но это все еще не работает. Я также попытался поместить его на другой слой и на другую сцену. Ничего не помогло. Но с одним изображением все нормально.

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1600,
    height: 1000
});
var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function() {
    var yoda = new Kinetic.Image({
        x: 200,
        y: 50,
        image: imageObj,
        width: 106,
        height: 118
    });

var imageObj2 = new Image();
imageObj2.onload = function() {
    var vader = new Kinetic.Image({
        x: 400,
        y: 200,
        image: imageObj2,
        width: 206,
        height: 218
    });

    // add the shape to the layer
    layer.add(yoda);
    layer.add(vader);

    // add the layer to the stage
    stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
imageObj2.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

СТАРОЕ:

Это пример кода с сайта http://www.html5canvastutorials.com/. Я хочу загрузить два (или более) изображения и анимировать их, нажав одну кнопку. С одной картинкой все нормально работает, но меня смущает этот код. После вызова функции loadImages реакции больше нет, даже предупреждение не отображается. Где и как я могу разместить свою функцию анимации? (Другую анимацию я реализую позже) Спасибо за ваши идеи!

CSS

  body {
    margin: 0px;
    padding: 0px;
  }

  #buttons {
    position: absolute;
    top: 50px;
    left: 100px;
  }

  #buttons > input {
    padding: 10px;
    display: block;
    margin-top: 5px;
  }

HTML

<div id="container"></div>
<div id="buttons">
  <input type="button" id="start" value="Start">
  </div>
<canvas id="myCanvas" width="578" height="200"></canvas>

JS

  document.getElementById('start').addEventListener('click', function() {
    anim.start(); //button should start animation
    }, false);

  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 >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var sources = {
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
    yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
  };

  loadImages(sources, function(images) {
    context.drawImage(images.darthVader, 100, 30, 200, 137);
    context.drawImage(images.yoda, 150, 55, 93, 104);
  });

  var angularSpeed = 360 / 4; //from this line on it's like the js-code doesn't exist
  var anim = new Kinetic.Animation(function(frame) { exist
      var angleDiff = frame.timeDiff * angularSpeed / 1000;
      images.yoda.rotate(angleDiff); //sources. instead images.?
  }, layer);