JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<img style="display:none;" id="img" src="http://boomsy.co/wp-content/uploads/2014/07/Edge-of-Tomorrow-Movie-Poster-Tom-Cruise-HD-Wallpaper.jpg" width="2000" height="1600">
    <canvas id="temp" width=2000 height=1600 style="width: 500px; height: 400px;"></canvas>
    <canvas id="edge" width=500 height=400></canvas>

JavaScript

var img = document.getElementById("img");
var ctx = document.getElementById("temp").getContext("2d");
ctx.drawImage(img ,0 ,0, 2000, 1600 );
var imageDataArr = ctx.getImageData(0, 0, 2000, 1600);
var canv = new fabric.Canvas("edge");
canv.add(new fabric.Image(ctx,
{
			
}));
canv.renderAll();