JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<div id="app"></div>

CSS

body {
  background-color: white;
}

.canvas {
  margin: 10px;
  border: dashed 4px #666666;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/all.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// ADD YOUR CODE HERE
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.src = event.target.result;
        img.onload = function () {
            var imgInstance = new fabric.Image(img, {
                // If i put it here, it doesnt work
                scaleY: canvas.height / img.width,
                scaleX: canvas.width / img.width
            });
            var filter = new fabric.Image.filters.Brightness({
                brightness: 200
            });
            imgInstance.filters.push(filter);
            imgInstance.applyFilters(function () {
                canvas.add(imgInstance.set({
                    left: 50,
                    top: 50,
                    angle: 30
                }));
            });
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}

// Image with CORS enabled - IMPORTANT: set crossOrigin property
fabric.Image.fromURL('https://s3-eu-west-1.amazonaws.com/kienzle.dev.cors/img/image2.png', function (img) {   
   
});