未捕獲的類型錯誤，而在HTML5中添加圖像畫布

我想在畫布上添加圖片，並使用Kinetic.js庫，但沒有在控制檯上的錯誤未捕獲的類型錯誤，而在HTML5中添加圖像畫布

Uncaught TypeError: Type error

我的代碼是：

JS Fiddle

HTML

<!DOCTYPE HTML>

設計

#wrapper{ 
width:300px; 
height:200px; 
margin:auto; 
border-radius: 15px; 
border: 4px solid black; 
} 

#container{ 
height:120px; 
width:100%; 
border:1px solid red; 
} 
#items, #cliparts{ 
height:55px; 
border:1px solid green; 
width:100%; 
} 

#items img, #cliparts img { 
max-height:50px; 
max-width:40px; 
padding: 0 5px; 
border:2px double white; 
} 
#items img:hover, #cliparts img:hover{ 
border:2px double blue; 
cursor:pointer; 
}

的JavaScript

document.getElementById('clip1').addEventListener('click', function() { 
       var stage = new Kinetic.Stage({ 
        container: "container", 
        width: 300, 
        height: 100 
       }); 

       var layer = new Kinetic.Layer(); 


      var clip_group = new Kinetic.Group({ 
        x: 200, 
        y: 30, 
        draggable: true, 
       }); 

      var image_src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png'; 

      var clip_image = new Kinetic.Image({ 
        x: 0, 
        y: 0, 
        image: image_src, 
        width: 150, 
        height: 138, 
        name: "image", 
       }); 




      clip_group.add(clip_image); 
      layer.add(clip_group); 
      stage.add(layer); 
      stage.draw();    
     });

來源

2012-12-17 Muhammad Usman