Fill image inside with color in fabric.js
<p>Basically, I have a png transparent image and I want to fill color inside the image while maintaining the outer transparency using fabricjs.</p>

<p>I tried using Tint and it works for the below image.</p>

<p><a href="https://i.stack.imgur.com/UB2Ih.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UB2Ih.png" alt="enter image description here"></a></p>

<pre><code>var canvas = this.__canvas = new fabric.Canvas('myCanvas'),
f = fabric.Image.filters;

fabric.Image.fromURL('imgpath/img.png', function (img) {
    var oImg = img.set({ left: 50, top: 100 }).scale(1);
    var tint = new fabric.Image.filters.Tint({
        color: '#ff6c78',
        opacity: 1
    });

    oImg.filters.push(tint);
    oImg.applyFilters(canvas.renderAll.bind(canvas));

    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);
 });
</code></pre>

<p>Now, I have an image which is transparent on the inside as well as out. Is it possible to get similar result for the below image? </p>

<p><a href="https://i.stack.imgur.com/fQPym.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fQPym.png" alt="enter image description here"></a></p>

<ul>
<li>(a) Original image </li>
<li>(b) The result using Tint </li>
<li>(c) The result I am actually looking for</li>
</ul>

<p>I am not sure whether this is entirely possible using fabricjs. If not, then what other javascript frameworks are there that can be used?</p>

<p>Below are the original images.</p>

<p><a href="https://i.stack.imgur.com/uXdw6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uXdw6.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/MlLes.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MlLes.png" alt="enter image description here"></a></p>

<p>Any help is appreciated. Thank you.</p>