JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/css/Jcrop.min.css">
<img id="image" />

CSS

.jcrop-active canvas {
 /*  display: none; */
}

JavaScript

var maxWidth = 200;
var img = new Image();

img.onload = function() {
	console.log('image loaded')

  var canvas = document.createElement('canvas');
  canvas.width = maxWidth;
  canvas.height = img.height * (maxWidth / img.width);

  var ctx = canvas.getContext('2d');
  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

	document.getElementById('image').src = canvas.toDataURL();
  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
  
  $('#image').Jcrop({
    setSelect: [0, 0, canvas.width, canvas.height]
  });
  $(".jcrop-active").css({"background": "url(\""+img.src+"\")", "background-size": "100%"});
  
  
  	console.log('ready');
   var jcropCanvas = $("");
   
  console.log(jcropCanvas.length);
 // var ct = jcropCanvas.getContext('2d');
//  ct.drawImage(img, 0, 0, jcropCanvas.width, jcropCanvas.height) 
}

img.setAttribute('crossOrigin', 'anonymous');
img.src = 'https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png';
var deleted = '';
while($('.jcrop-active > canvas').length < 0 && !deleted) {
  console.log('hellow');
	$('.jcrop-active > canvas').remove();
  deleted = true;asd
  ';fk kjlsdfhjfknlsaoilk;jrefdgcvjkmkl '
}