JSFiddle - React, Tailwind, and code Playground

by arpitgshah

HTML

<script src="http://www.xhtmlpoint.com/marvinj-0.9.js"></script>
<canvas id="canvas" width="1100" height="94"></canvas><br/>

CSS

body{font-size:12px}
canvas{width:1100px; margin:auto;}

JavaScript

var imageOriginal = new MarvinImage();
var imageProcessed = new MarvinImage();
var imageDisplay = new MarvinImage();
var imageRotateDisplay = new MarvinImage();
var originalUploadedimage = new MarvinImage();
var canvas = document.getElementById("canvas");
var image = new MarvinImage();

image.load("https://i.imgur.com/4O8VFQY.jpg", function(){
   imageProcessed = imageOriginal.clone();
	originalUploadedimage = imageOriginal.clone();
	repaint();
});

if(imageProcessed.getWidth() > 699){
		Marvin.scale(imageProcessed, imageDisplay, 700, 700);
			imageDisplay.draw(canvas);
		} else{
			Marvin.scale(imageProcessed, imageDisplay, imageProcessed.getWidth(), imageProcessed.getHeight());
		}
		
		imageRotateDisplay = imageDisplay.clone();
		Marvin.imgrotate(imageRotateDisplay, imageDisplay);
		//repaintU();
		imageProcessed = imageDisplay.clone();
		imageOriginal = imageDisplay.clone();
		imageOriginal.draw(canvas);
   
   function repaint(){
	var canvas = document.getElementById('canvas');
	canvas.width = 700;
	canvas.height = 700;
	canvas.getContext("2d").fillStyle = "#eeeeee";
	canvas.getContext("2d").fillRect(0,0,canvas.width, canvas.height);
	if(imageProcessed.getWidth() > 699){
		Marvin.scale(imageProcessed, imageDisplay, 700, 700);
		imageDisplay.draw(canvas);
	} else{
		imageProcessed.draw(canvas);
	}
	imageProcessed.update();

}