Kinetic.js Text gets drawn under shape with fill value set sometimes

Question

In this fiddle: http://jsfiddle.net/m1erickson/fu5LP/

A group of wedges are drawn with text in the middle to produce the above image on the canvas.

When you set the fill value of the wedge object however, the output is rather odd:

Some text values are being drawn under the wedge's fill, I have no idea why.

The code for the fiddle is here:

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

var cx = 175;
var cy = 175;
var wedgeRadius = 140;
var accumAngle = 0;

var center = new Kinetic.Circle({
x: cx,
y: cy,
radius: 5,
fill: 'red'
});
layer.add(center);

for (var i = 0; i < 12; i++) {
    newTextWedge(30, "Element # " + i);
}

function newTextWedge(angle, text) {

var wedge = new Kinetic.Wedge({
    fill : 'black',
    x: cx,
    y: cy,
    //If I add this fill the above output of hiding text occurs
    //fill: 'black',
    radius: wedgeRadius,
    angleDeg: angle,
    stroke: 'gray',
    strokeWidth: 1,
    rotationDeg: -accumAngle + angle / 2
});
layer.add(wedge);

if (accumAngle > 90 && accumAngle < 270) {
    var offset = {
        x: wedgeRadius - 10,
        y: 7
    };
    var textAngle = accumAngle - 180;
} else {
    var offset = {
        x: -50,
        y: 7
    };
    var textAngle = accumAngle;
}

var text = new Kinetic.Text({
    x: cx,
    y: cy,
    text: text,
    fill: 'red',
    offset: offset,
    rotationDeg: textAngle
});
layer.add(text);

layer.draw();

accumAngle += angle;
}

Anyone able to give any insight as to why this happens?

Answer 1

Debugging and watching the chart created step by step shows what is happening. The wedge layer is rendered and then the text layer is rendered. The next wedge is rendered on top of that last text layer.

Here is a fork of the fiddle: http://jsfiddle.net/smurphy/UvdWt/

Kinetic Shape has a method moveToBottom() that you can call on the filled wedge that will force it to the bottom of the stack. See documentation

layer.add(wedge);
wedge.moveToBottom();