KineticJS caching an invisible shape

Question

I'm looking for a way to use the new cache() method on a shape that should have opacity 0 and appear later on screen. I don't see any callback argument to make the opacity 0 afterwards, but the toImage() method has that. I would like to use cache() instead though, since it's less verbose. Does anyone got a clue on how to do this properly?

Clarification:

Here is a jsfiddle and the code below. I want the shape to have opacity 0 after I cache it, so I can later tween the opacity value up. If I change the x or y value after caching, the change shows on the canvas, but for some reason the change in opacity doesn't.

var stage = new Kinetic.Stage({
    container: 'canv',
    height: 400,
    width: 400
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    width: stage.width(),
    height: stage.height(),
    fill: 'black'
});

rect.cache();
rect.opacity(0); //I'm expecting it to be hidden here.

layer.add(rect);
stage.add(layer);

Note: I tried to put rect into a group with opacity 0 too, but it's still fully visible.

Answer 1

Seems like this is a bug in KineticJS. I found a pull request to the repository that fixes this.