CODEWITHSUNDEEP
kineticjs
mersadk
mersadk

Reputation: 337

KineticJS won't draw multiple images

I am trying to draw multiple images on canvas using for loop. For some reason it only displays image on last position.

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<div id="container"></div>
<script defer="defer">    
var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = new Kinetic.Layer();

// add the layer to the stage
stage.add(layer);

for (var i=0; i<5; i++) {
    var imageObj = new Image();
    imageObj.onload = function() { 
        var yoda = new Kinetic.Image({

            x: 100*i,
            y: 50,
            image: this,
            width: 106,
            height: 118
        });

        // add the shape to the layer
        layer.add(yoda);
        stage.draw();

    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
}
</script>

JSFiddle

Upvotes: 0

Views: 246

Answers (1)

markE
markE

Reputation: 105035

Problem is that you're reusing var imageObj inside a loop.

Before the first image has been loaded, imageObj is being overwritten in the next step through the loop.

So fully load imageObj outside the loop and add multiple yodas inside the loop like this:

A Demo: http://jsfiddle.net/m1erickson/uK4DW/

var imageObj = new Image();
imageObj.onload = function() {
    for (var i=0; i<5; i++) {
        var yoda = new Kinetic.Image({
            x: 100*i,
            y: 50,
            image:imageObj,
            width: 106,
            height: 118
        });
        layer.add(yoda);
        layer.draw();
    };
}
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

Upvotes: 1

Related Questions