Overview using html5 canvas.

by Anurak Sumranphan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<button id="hue">
  Change to grayscale color
</button>

<canvas id="c" width="600" height="600"></canvas>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

fabric.Object.prototype.selectable = false;

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://i.imgur.com/28kU1bo.png', function (oImg) {
	canvas.add(oImg);
});

document.getElementById('hue').onclick = function () {
	var obj = canvas.getActiveObject();
  
  obj.filters.push(new fabric.Image.filters.Grayscale());
  obj.applyFilters();
  
	canvas.renderAll();
};