JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<input type="file" id="imageFile"/>
		<hr/>
		<div id="canvasContainer">
		</div>

JavaScript

/* jshint ignore:start */
        'use strict';

        var currentImage, canvas, imageCanvas, gl, program;
        var fcFabric, oImg, canvas, fc, attrs = {};

        var x1, x2, y1, y2;
        var initAR = {};
        var AR = {};
        var inheritsFrom = function (child, parent) {
        child.prototype = Object.create(parent.prototype);
        };

        var calculateAspectRatio = function (cols, rows) {
        var imageAspectRatio = cols / rows;
        var ele = gl.canvas;
        var windowWidth = ele.width;
        var windowHeight = ele.height;
        var canvasAspectRatio = windowWidth / windowHeight;
        var renderableHeight, renderableWidth;
        var xStart, yStart;

        /// If image's aspect ratio is less than canvas's we fit on height
        /// and place the image centrally along width
        if(imageAspectRatio < canvasAspectRatio) {
        renderableHeight = windowHeight;
        renderableWidth = cols * (renderableHeight / rows);
        xStart = (windowWidth - renderableWidth) / 2;
        yStart = 0;
        }

        /// If image's aspect ratio is greater than canvas's we fit on width
        /// and place the image centrally along height
        else if(imageAspectRatio > canvasAspectRatio) {
        renderableWidth = windowWidth;
        renderableHeight = rows * (renderableWidth / cols);
        xStart = 0;
        yStart = ( windowHeight  - renderableHeight) / 2;
        }

        ///keep aspect ratio
        else {
        renderableHeight =  windowHeight ;
        renderableWidth = windowWidth;
        xStart = 0;
        yStart = 0;
        }
        AR.renderableHeight = renderableHeight;
        AR.renderableWidth = renderableWidth;
        AR.x = xStart;
        AR.y = yStart;
        if (!initAR.x) {
        initAR.x = xStart;
        initAR.y = yStart;
        initAR.renderableWidth = renderableWidth;
        initAR.renderableHeight = renderableHeight;
        }

        return AR;
        };

        var...