Search code examples
javascriptcanvashtml5-canvaskineticjs

Kineticjs: shadow blur is not working after applying filters

I am working on HTML5 canvas. I am using KineticJS in my project. I need to add shadow to the image when user clicks on it. I am doing this 

image.setShadowBlur(50);
image.attrs.shadowOpacity = 5;

It's working fine. But the problem is that once I apply filters on the image after that it does not work. To apply filters I am doing this

image.cache();
image.filters([Kinetic.Filters.Grayscale]);

I don't know why the shadow blur is not working. Here's the plunkr. Thank you.

Solution

  • You need to recache image after applying shadow.

    image.setShadowBlur(50);
image.clearCache();
image.cache();

    Demo

    Also it is better to use Konva. It has a lot of fixes in caching function.