mouse event won't fire on a kineticjs shape - events

Question

Upgraded from 4.0.5 to 4.4.1 because Chrome stopped rendering correctly.
However, in the 4.0.5 version it was possible to draw a line in a Kinetic.Shape object and detect mouse events on it. This seems no longer the case. Even when using the recommended Canvas.fillStroke(this) call.
Here is some code:
var myshape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.setLineWidth(20);
context.moveTo(100, 10);
context.lineTo(100, 60);
context.closePath();
context.stroke(); //this does
//canvas.fillStroke(this); //this doesn't bring the line on the screen
//context.fill(); //this doesn't make the event work either
context.beginPath();
context.setLineWidth(10);
context.moveTo(100, 60);
context.lineTo(100, 120);
context.closePath();
//canvas.fillStroke(this); //this doesn't bring the line on the screen
context.stroke(); //this does
canvas.fillStroke(this);
},
draggable: true
});
myshape.on('mousedown', function(event){
alert('mousedown');
});
An example in this fiddle: http://jsfiddle.net/GDQ6G/ (Only seems to render the line in Chrome. Not in firefox)
Another example here on this test page: http://www.planetinaction.com/linetest.htm
It is clear I am doing something wrong since this code doesn't render in Firefox. Can someone please show me this is done in the linked fiddle? The documentation for a shape shows how to draw a single item. I need to draw multiple items to form my custom shape as illustrated with this simplified two line example.

Answer 1

As it turns out based on Eric Rowells answer, a shape can only contain one path. That is a pity because version 4.0.5 was able to handle multiple paths until Google changed something funky in Chrome.
Anyway, the answer I was looking for is held in KineticJS groups. The code gets a lot more elaborate but it works.
var stage = new Kinetic.Stage({
container: 'container',
width: $('#container').width(),
height: $('#container').height()
});
var layer = new Kinetic.Layer('spline');
var group = new Kinetic.Group({
draggable: true,
});
group.add(new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(100, 10);
context.lineTo(100, 60);
context.closePath();
canvas.stroke(this);
},
strokeWidth: 6,
}));
group.add(new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(100, 60);
context.lineTo(100, 120);
context.closePath();
canvas.stroke(this);
},
strokeWidth: 20,
}));
group.on('mousedown', function(event){
alert('mousedown');
});
group.on('mouseover', function(event){
alert('mouseover');
});
layer.add(group);
stage.add(layer);
Here is the code in Fiddle: http://jsfiddle.net/QcsBH/
I could not find a reference in the documentation with regard to event handling by a group but I am pleasantly surprised to see that a group handles events of all the members in it.

Answer 2

Each KineticJS shape should only have one beginPath() and one closePath() execution. You also shouldn't ever directly stroke or fill using the context. You need to use the methods tied to the KineticJS canvas renderer:
canvas.stroke(this);
canvas.fill(this);
canvas.fillStroke(this);
Here's an example of drawing custom shapes:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/
If you bind a simple listener to the triangle in that tutorial, the event fires correctly (you can modify the code right on the page)