Why Isn't My Shadow Blurry? (Kinetic JS)

Question

I'm learning KineticJS and tinkering with shadows. I made a shape and gave it shadow blur, but the shadow isn't blurry. I'm using the latest version of Chrome. This is the code I'm using:

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

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 250,
    y: 120,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffset: {
        x: 10,
        y: 10
    },
    shadowOpacity: 0.5
});

// add the shape to the layer
layer.add(rect);

// add the layer to the stage
stage.add(layer);

Its copied from here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shadows/
Here's a Fiddle: http://jsfiddle.net/acbabis/Tu8Qh/

Answer 1

Yes, this is a misbehavior in Chrome which will apply a shadow on both the Kinetic stroke and a second on the Kinetic fill (double shadowing).

The current version of KineticJS has not yet accounted for / corrected this misbehavior satisfactorily.

The workaround is to:

• use only a stroke or fill, but not both.

• draw 1 filled rect and shadow it. Then draw a second stroked rect on top.