Opacity Slider For A Fabric Object

I have a canvas and it includes fabric objects.I want to do opacity slider for text area's backround 'textbackroundColor' in canvas.How can I do slide and change functions? $('#bac

Solution 1:

first get active object of canvas

var activeObject = canvas.getActiveObject();

and then

$("#backgroundOpacity").slider( {
       max : 100,
       value : activeObject.opacity * 100,
       slide: function (event, ui) {
           activeObject.setOpacity(ui.value / 100);
           canvas.renderAll();
       },
       stop : function (event, ui) {
           canvas.renderAll();
       }
});

Solution 2:

Another way, via a range input coupled with $(document).on

$(document).on("change", "#alpha", function () {
transval = $(this).val();
var obj = canvas.getActiveObject();
obj.set({
opacity: transval
});
canvas.renderAll();
});