Change png image color in fabric js

Question

Is there any way to change the color of the image using fabricJS ? Applying Tint filter will just add color not changing the original color.

Answer 1

For an image like this you can use the hue rotation filter.

var canvas = new fabric.StaticCanvas('c');
var image;
var imgEl = document.createElement('img');
imgEl.crossOrigin = 'anonymous';
imgEl.onload = function() {
  image = new fabric.Image(imgEl);
  image.filters = [new       fabric.Image.filters.HueRotation()];
  canvas.add(image);
}
imgEl.src = 'https://i.imgur.com/28kU1bo.png';


document.getElementById('hue').onclick= function() {
  image.filters[0].rotation = 2 * Math.random() - 1;
  console.log(image.filters[0].rotation);
  image.applyFilters();
  canvas.requestRenderAll();
};

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button id="hue">Change to random color</button>
<canvas id="c" width=600 height=600 ></canvas>