ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 753 forks source link

Shadow color not working as expected #1036

Open Pmleader opened 9 years ago

Pmleader commented 9 years ago

When using shadowColor(rgba()) on a shape it correctly displays a shadow in the specified color on the canvas.

var rect = new Kinetic.Rect({
        x: 250,
        y: 120,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 3,
        shadowColor: 'rgba(255,0,0,0.3)',
        shadowBlur: 10,
        shadowOffset: {x:10,y:10},
        draggable:true
      });

However when you try to specify the separate channels for the shadow it does not use the color values you specify

var rect = new Kinetic.Rect({
        x: 250,
        y: 120,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 3,
        shadowRed: 255, 
        shadowGreen: 0,
        shadowBlue: 0,
        shadowAlpha: 0.3,
        shadowBlur: 10,
        shadowOffset: {x:10,y:10},
        draggable:true
      });

You are also not able to alter a singe color channel in an event because of this bug. For example:

rect.on('mousedown', function() {
        rect.shadowAlpha(0.8);
        stage.draw();
      });

Here you can find a JSFiddle which replicates the issue

This behaviour is present in all browsers, tested with KineticJS 5.1.0

If you need more information feel free to message me.