Click Event on a Shape doesn't work in kineticjs

Question

I want to print message when a click event on a shape is made.It doesn't fire at all and draggable also doesn't work.How can I make this work?Can anyone help?

JS Code

 $(function(){
    var stage = new Kinetic.Stage({
        container: 'toolbar',
        width: $("#gamebox").width(),
        height: window.innerHeight * 0.9,
        listening: true
   });
  var layer = new Kinetic.Layer();
  stage.add(layer);
  var line = new Kinetic.Shape({
            drawFunc: function (canvas) {
             console.log("shape");
            var context = canvas.getContext();
            context.beginPath();
            context.moveTo(20,5);
            context.quadraticCurveTo(10, 35, 20, 60);
            context.moveTo(20,5);
            context.quadraticCurveTo(30, 35, 20, 60);
            canvas.stroke(this);
            context.fillStyle = 'black';
            context.fill();
        },
         strokeWidth: 2,
        draggable: true
    });

    line.on('click', function() {
        alert("click detected");
    });
    layer.add(line);
    stage.add(layer);
 });

HTML Code

<div id="toolbar">        
</div>
<div id="gamebox">
</div>

Answer 1

In the more recent versions of KineticJS (5.0+ I think), a wrapped context is fed into drawFunc.

Note that this wrapped context is a subset of the canvas context and does not have all the canvas context methods. For example, compositing is not available.

Here's a working example of your code using KineticJS 5.1.0:

var stage = new Kinetic.Stage({
  container: 'container',
  width: 350,
  height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);


var line=new Kinetic.Shape({
  x:0,
  y:0,
  stroke:"blue",
  fill: 'red',
  drawFunc: function(context) {
    context.beginPath();
    context.moveTo(20,5);
    context.quadraticCurveTo(10, 35, 20, 60);
    context.moveTo(20,5);
    context.quadraticCurveTo(30, 35, 20, 60);
    context.fillStrokeShape(this);
  }
});
layer.add(line);

line.on('click', function() {
  alert("click detected");
});

layer.draw();

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<h4>Click the shape.</h4>
<div id="container"></div>