Dynamically adding circles on stage with KineticJS

Question

I have the following code. I want the user to click on a stage object and a circle to be added . My code

var stage, backgroundLayer, backgroundImage, imageObj;
var pointLayer, pointObj;
var points = {};

imageObj = new Image();
imageObj.src = "../media/proline_ap_pa_ceph__17839_1340650087_1280_1280.png"

window.onload = function (){
    stage = new Kinetic.Stage({
        width:800,
        height:600,
        container:'container'
    });

    pointLayer = new Kinetic.Layer({
        width:stage.width,
        height:stage.height
    });

    console.log(backgroundLayer);
    console.log("successfully created stage")
    stage.add(backgroundLayer);
    stage.add(pointLayer);
    document.getElementById('hide').addEventListener('click', function(){
        backgroundImage.hide();
        backgroundLayer.draw();

    });
    document.getElementById('show').addEventListener('click', function(){
        backgroundImage.show();
        backgroundLayer.draw();
    });
    stage.on('click', function (event){
        console.log(event);
        console.log("clicking on stage");
        var point = new Kinetic.Circle({
            fill:"black",
            radius:40,
            width:30,
            height:30,
            x:event.pageX,
            y:event.pageY
        });

        console.log(point);
        pointLayer.add(point);
        pointLayer.draw();
        stage.draw();

    });

};


backgroundLayer = new Kinetic.Layer({
    width:800,
    height:600,
    visible:true
});



imageObj.onload = function (){
    console.log("Image loaded adding kinetic image")
    backgroundImage = new Kinetic.Image({
        image:imageObj,
        width:800,
        height:600
    });
    console.log("finised image loading");
    console.log("Adding image to background Layer");
    backgroundLayer.add(backgroundImage);

}

But no circle is shown on my stage, plus event.target seems to be of type Image, while I clicked on stage. I guess it's because the image sits on top of the layer added first on stage.

Answer 1

Listen for the contentClick event instead of the click event:

stage.on('contentClick',function(){
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);

    // and now add your circle

});