JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
 <input type="file" id="files" />
 <button id="showInvert">Invert</button>
<button id="showColor">Color</button>
 <canvas id="hiddencanvas" style="display:none;"></canvas>
<canvas id="invertcanvas" style="display:none;"></canvas>
 
 <div id="canvasarea"> 
              <canvas id="icanvas"  height=450 width=600></canvas>
</div>
 <div id="canvasarea1">
						 <canvas id="canvas"  height=450 width=600></canvas> 
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>

<script></script>

JavaScript

var canvas = new fabric.Canvas("canvas");
var Invertcanvas = new fabric.Canvas("icanvas");
var hc = document.getElementById("hiddencanvas");
var ctx = hc.getContext("2d");
var imgObj = new Image();
var oImg = null;
var activeCanvas = null;
var fileTypes = ['jpg', 'jpeg', 'png']; //acceptable file types
$("#files").change(function(evt) {
	canvas.clear();
	canvas.off();
  var tgt = evt.target || window.event.srcElement,
	files = tgt.files;
	// FileReader support
	if (FileReader && files && files.length) {
		var fr = new FileReader();
		var extension = files[0].name.split('.').pop().toLowerCase();
		fr.onload = function(e) {
			success = fileTypes.indexOf(extension) > -1;
			if (success) {
					// get loaded data and render thumbnail.
					imgObj.src = e.target.result;
					imgObj.onload = function () {
						_renderImage(imgObj);
					}
			}

		}

		fr.onloadend = function(e) {
			console.debug("Load End");
		}
		
			fr.readAsDataURL(this.files[0]);
	}
	// Not supported
	else {
		// fallback -- perhaps submit the input to an iframe and temporarily store
		// them on the server until the user's session ends.
	}
});

var _renderImage = function(imgObj) {
	try {
		hc.width = imgObj.width;
		hc.height = imgObj.height;
		ctx.clearRect(0,0, hc.width, hc.height);
		ctx.drawImage(imgObj, 0,0, hc.width, hc.height);
	oImg = new fabric.Image(hc, 
	{
		selectable : false,
		width : hc.width,
		height : hc.height,
		lockUniScaling: true,
		centeredScaling: true,
    alignX : "mid",
		alignY : "mid",
	});
	canvas.add(oImg);
	canvas.centerObject(oImg);
	canvas.renderAll();
  activeCanvas = canvas;
	_applyZoom();
	_enablePanning(canvas);
	} catch(E) {
		console.log(E);
	}
}

/**
 * Used to apply Zooming on the canvas.
 */
var _applyZoom = function () {
	var canvasarea = document.getElementById("canvasarea");
	if (canvasarea.addEventListener) {
		// IE9, Chrome, Safari, Opera
		canvasarea.addEventListener("mousewheel", _zoom, false);
		//...