javascript - Change Image Design color Fabric js

Question

1i have to change active object image color currently my t-shirt color is changing but when i add design on it i am unable to change color of.

My Code To change Tshirt Color :

//setup front side canvas
canvas = new fabric.Canvas('tcanvas', {
    hoverCursor: 'pointer',
    selection: true,
    selectionBorderColor: 'blue'
});
canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    'object:modified': function(e) {
        e.target.opacity = 1;
    },
    'object:selected': onObjectSelected,
    'selection:cleared': onSelectedCleared
});
$('.color-preview').click(function(){
    var color = $(this).css("background-color");
    document.getElementById("shirtDiv").style.backgroundColor = color;
    $('.shirtDivs').css('background-color',color);
});

HERE I Try To change Design color

$('#image-color').miniColors({
    change: function(hex, rgb) {
        var activeObject = canvas.getActiveObject();
        if (activeObject && activeObject.type === 'image') {
            activeObject.fill = this.value;
            canvas.renderAll();

        }
    },
    open: function(hex, rgb) {

    },
    close: function(hex, rgb) {

    }
});

Demo

Answer 1

@user3810894 - I'm guessing what you are asking is how to change the background color of the design (gravatar in your demo).

The reason it is not taking on the color on the shirt background is because the gravatar's background color is white and not transparent.

instead of

If you were to take those images and clear out the background and resave (as a PNG with transparency) then it would take on the color of the shirt when you overlayed it.

If you want to change the background color of the avatar different than the color of the shirt, then you will do the same thing - make the background transparent and then give it a background color with CSS (like how it works for the shirt in the demo)

The shirt changes "color" because it's only a transparent image of a shirt with shadows using varying degrees of transparency.

So in essence you could do it to your gravatar images as well.

Hope that helps someone.