Fill the image inside with color in the fabric.js file

Question

Basically, I have a transparent png image, and I want to fill the color inside the image, while preserving the outer transparency with fabricjs.

I tried using Tint and it works for the image below.

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); }); 

Now I have an image that is transparent both inside and out. Is it possible to get a similar result for the image below?

• (a) Original image
• (b) Result using Tint
• (c) The result I'm really looking for

I'm not sure if this is possible with fabricjs. If not, what other javascript frameworks can be used?

Below are the source images.

Any help is appreciated. Thanks.

Answer 1

Since these are vector images. I would convert them to SVG objects, and then all you have to do is change fill: yourColorChoice; <path> element in SVG.

With this method you do not need JS, all this can be done using pure CSS.

You can convert images to SVG elements using Adobe Illustrator (I think there is some free software that does this as well)