Using glfx.js filters in Fabric.js

Question

I am building a simple canvas application using Fabric.js. While things are looking good, I am interested in some filter effects to make it a little cooler. After some searches I came across through various sources. But I am particularly interested in glfx.js library.

I couldn't find any particular way to integrate Fabric.js with glfx.js. glfx.js seems to have its own canvas classes fx.Canvas so I am a little worried that it will not be possible to integrate the two.

My question is, is it possible to use other libraries like glfx.js with Fabric.js? Because I can't find out how.

If not, if I am using Fabric.js will I be needing to write my own filters to get those effects?

http://evanw.github.io/glfx.js/docs/

Answer 1

It's fairly easy to create new filters in Fabric.

If you look at the source of Sepia filter, for example, you can see that applyTo is responsible for actual pixel-per-pixel processing. When applyTo is called, it's being passed a canvas element representing image onto which filter is being applied to. You modify an image by modifying this corresponding canvas element (getImageData -> pixel processing -> putImageData).

But what about glfx.js?

I see that fx.canvas() returns a newly-created canvas, with already initialized WebGL context. Unfortunately, it doesn't seem to support accepting already existing canvas element, to operate upon. If it did, we could do this:

...
applyTo: function(canvasEl) {
  var fxCanvas = fx.canvas(canvasEl);
  fxCanvas.ink(0.25).update();
}
...

But as it stands right now I don't see a way to integrate it with Fabric filters.

Answer 2

I use this http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl its fast its not as smooth as glfx.js but i does great job!

I use it kind of dumb because of the small size images, i get the object activeObject.getSrc(); then I add it to a temp canvas apply the filter and add it again in canvas!