Search code examples
javascriptcanvaskineticjskonvajs

How to apply a filter to a shape with image fill in KonvaJS?

I'm using Konva.js to do some canvas animations. I have circle shapes, with an image fill, and would like to apply a color overlay/filter to the shape (RGBA).

This is how I'm creating the Shape object:

var konvaObject = new Konva.Circle({
    x: 100,
    y: 100,
    radius: 300,
    stroke: this.color,
    strokeWidth: 6,
    fillPatternRepeat: 'no-repeat',
});

// load the image into the shape:
var imageObj = new Image();
imageObj.onload = function () {
    konvaObject.fillPatternImage(imageObj);
    konvaObject.draw();
}
imageObj.src = 'www.demo.com/anImageName.png';

demo: http://jsbin.com/winugimeme/edit?js,output

The Docs outline an RGBA filter, however as far as I can tell it can only be applied to Konva.Image items.

Is there a way to re-work my above code so that I can apply filters to the shape object/fill image?

Solution

  • According to filter documentation, you have to cache shape before applying filters http://konvajs.github.io/api/Konva.Filters.html#RGBA

    node.cache();
node.filters([Konva.Filters.RGBA]);
node.blue(120);
node.green(200);
node.alpha(0.3);

    Note: jsbin demo will not work with this example as fill image should be CORS enabled (e.g. hosted on same domain).