Applyfilter in HTML5 Kinetic

Question

I was using kinetic-v4.0.0.js and my code run perfect. I now change to the new js since I cannot find the old one so as to download it, and I have many problems. For example one of my problems is the applyfilter. I have:

 image.applyFilter({
    filter: Kinetic.Filters.Grayscale,
    callback: function() {          
        layer.draw();
    }
 });

and I get this:

 Kinetic warning: Unable to apply filter. g is undefined

Does anyone know what would be the problem? Thanks in advance.

Answer 1

The syntax for applyFilter changed in KineticJS 4.1.0 (see the changelog)

Image.applyFilter() now takes in a required filter function, optional config object, and optional callback, rather than a config object that contained these three properties.

image.applyFilter(Kinetic.Filters.Grayscale, null, function() {
  layer.draw();
});

You can also use the setFilter function:

image.setFilter(Kinetic.Filters.Grayscale);
layer.draw();

Or set the filter through the images filter property:

var image = new Kinetic.Image({
  x: 10,
  y: 10,
  image: imageObj,
  draggable: true,
  filter: Kinetic.Filters.Grayscale,
  filterRadius: 20
});