KineticJs Adds multiple canvas instead of a single canvas with multiple layers

Question

Im new to kineticJs and working on adding multiple images on a kinetic.stage.

At first I had successfully created a canvas using this code:

var stage = new Kinetic.Stage({
    container: 'content',
    width: x,
    height: y
    });

//declare layer
var layer = new Kinetic.Layer();

//declare image
var baseImage = new Kinetic.Image({
  image: $('#img')[0];
});

layer.add(baseImage);
stage.add(layer);

but I have to add more and more images to the canvas every once in a while and so I made a function that adds another image to the canvas. My code goes like this..

function addImageLayer(){
//declare layer
var layer2 = new Kinetic.Layer();

//declare image
var image2 = new Image();
image2.src = "../resources/images/frames/newYearBunny.png";

image2.onload = function(){
    var KineticImage2 = new Kinetic.Image({
        x: 200,
        y: 50,
        image: image2,
        draggable: true
    });


    layer2.add(KineticImage2);
    stage.add(layer2);
}}

Unfortunately, Ive just added a new on top of my existing whereas I must add a layer. Thanks

Answer 1

You can add new images to the existing layer

(Make sure you layer.draw() after adding new objects to a layer so they are displayed)

function addImageLayer(){
    //declare image
    var image2 = new Image();
    image2.src = "../resources/images/frames/newYearBunny.png";
    image2.onload = function(){
        var KineticImage2 = new Kinetic.Image({
            x: 200,
            y: 50,
            image: image2,
            draggable: true
        });
        layer.add(KineticImage2);
        layer.draw();
    }
}