JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas"></canvas>

<div class="filters" style="display:none;">
    <input type="checkbox" data-filter="0">Grayscale
    <input type="checkbox" data-filter="1">Sepia
    <input type="checkbox" data-filter="2">Invert
    <input type="checkbox" data-filter="3">Emboss
    <input type="checkbox" data-filter="4">Sharpen
</div>
    
    
<img id="img" style="display:none"...

JavaScript

var canvas = new fabric.Canvas("canvas");

canvas.on({
	'object:selected': function (e) {
		showFilters();
	},
	'selection:cleared': function (e) {
		hideFilters();
	}
});

fabric.Image.fromURL(document.getElementById('img').src, function(image) {
    canvas.add(image);
});

function showFilters() {
    $(".filters").show();
}

function hideFilters() {
    $(".filters").hide();
}

var filters = [
    new fabric.Image.filters.Grayscale(),       // grayscale    0
    new fabric.Image.filters.Sepia2(),          // sepia        1
    new fabric.Image.filters.Invert(),          // invert       2
    
    new fabric.Image.filters.Convolute({        // emboss       3
        matrix: [ 1, 1, 1,
                 1, 0.7, -1,
                 -1, -1, -1 ]
    }),

    new fabric.Image.filters.Convolute({        // sharpen      4
        matrix: [  0, -1, 0,
                -1, 5, -1,
                0, -1, 0 ]
    })
];

$(function() {
    $('.filters').on("change", "input", function () {
        var isChecked = $(this).prop("checked"),
            filter = $(this).data("filter"),
            obj = canvas.getActiveObject();
        
        obj.filters[filter] = isChecked ? filters[filter] : null;
        obj.applyFilters(function () {
            canvas.renderAll();
        });
    });
});