FabricJS apply/remove filters

by codingdude

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<h1>FabricJS filter demo</h1>
<button onclick="demo.setFilters()">Set filters</button>
<button onclick="demo.unsetFilters()">Unset filters</button>
<div id="canvasContainer">
<canvas id="c" width="400" height="400"></canvas>
</div>

CSS

body {
	font: 11pt Arial, Helvetica;
}

#canvasContainer {
	background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
	display: inline-block;
	border: 2px solid #ccc;
}

.key>span {
	background: #428bca;
	border-radius: 3px;
	color: white;
	font-size: 9pt;
	padding: 2px;
}

JavaScript

var demo = {
	canvas: null,

    setFilters: function() {
        var obj = demo.canvas.getActiveObject();
        if (!obj) return;
        obj.filters = [
            // Grayscale:
            //new fabric.Image.filters.Grayscale(),
            // Sharpen:
            new fabric.Image.filters.Convolute({
              matrix: [ 0, -1, 0, -1, 5, -1, 0, -1, 0 ]
            })
        ];
        obj.applyFilters(function() { demo.canvas.renderAll(); });
    },
    
    unsetFilters: function() {
        var obj = demo.canvas.getActiveObject();
        if (!obj) return;
        obj.filters = [];
        obj.applyFilters(function() { demo.canvas.renderAll(); });        
    },
    
	init: function() {
		// Init canvas:
		demo.canvas = new fabric.Canvas('c');

		var img = new Image(); 
        img.crossOrigin = 'anonymous';
		img.onload = function() {
			var fImg = new fabric.Image(this, {
				originX: 'center',
				originY: 'center',
				left: demo.canvas.getWidth()/2,
				top: demo.canvas.getHeight()/2
			});
			demo.canvas.add(fImg);
			demo.canvas.setActiveObject(fImg);
		};
		img.src = 'https://cdn.pixabay.com/photo/2017/03/17/21/35/tiger-2152747_960_720.jpg';
	},
};

window.onload = function() {
	demo.init();
}