CODEWITHSUNDEEP
imagekineticjs
Marco Gouveia
Marco Gouveia

Reputation: 23

Loading image with Kineticjs

I'm having trouble loading a simple image into a layer. Sometimes it appears, others it doesn't.

 <div id="container0" style="position:absolute; top:5px; left: 5px;"></div> 

 <script>
  Layer = new Kinetic.Layer();

  window.onload = function () {

   stage = new Kinetic.Stage({ container: "container0", width: 1000, height: 500 });
   stage.add(Layer);
   var img = new Image();
   img.src = "Images/Start.png"
   Image= new Kinetic.Image({ x: 250, y: 150, width: 251, height: 231,image: img});
   Layer.add(Image)

   Layer.draw();
  };
 </script>

I guess it showing or not depends on if the image load time is quick enough, but I'm probably not doing it right. Any help is appreciated. Thanks

Upvotes: 2

Views: 3066

Answers (1)

lavrton
lavrton

Reputation: 20298

Use image.onload:

img.onload = function(){
   Image= new Kinetic.Image({ x: 0, y: 0, width: 251, height: 231,image: img});
   layer.add(Image);
   layer.draw();
}

http://jsfiddle.net/lavrton/WeVW4/1/

Upvotes: 2

Related Questions