JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="row">
  <div class="col-xs-1 border">Menu</div>
  <div class="col-xs-11 border" style="height:90vh;">
      <canvas id="Canvas"></canvas>
  </div>

</div>

CSS

body{ background-color: ivory; }

.border{
  box-sizing: border-box;
  border: solid 1px black;
}

#Canvas{
  box-sizing: border-box;
  border: solid 1px red;  
  max-width:100%;
  max-height:100%;
}

JavaScript

// Init the canvas
var canvas=document.getElementById("Canvas");
canvas.width = 1000;
canvas.height = 800;

var ctx=canvas.getContext("2d");
ctx.fillStyle = "#ffffff";
$iCanvas=$('#Canvas');

// Init the drag functionality
var isDragging = false;
var startX;
var startY;

// Arrays of the idols
var idols=[];
var NUM_IDOLS=0;

// Trigger the idols to load
for(var i=0;i<idols.length;i++){
  idols[i].image.src=idols[i].url;
}

//////////////////////////////
// functions
//////////////////////////////

// queue up another idol
function addIdol(name,x,y,scaleFactor,imgURL){
  base_image = new Image();
  base_image.src = imgURL;
  base_image.onload = function(){
        ctx.drawImage(base_image, x, y);
  }
  //img.crossOrigin='anonymous';
  base_image.onload=startInteraction;
  idols.push({name:name,image:base_image,x:x,y:y,scale:scaleFactor,isDragging:false,url:imgURL});
  NUM_IDOLS++;
}

// called after each idol fully loads
function startInteraction() {

  // return until all idols are loaded
  if(--NUM_IDOLS>0){return;}

  // set all idols width/height
  for(var i=0;i<idols.length;i++){
    var img=idols[i];
    img.width=img.image.width*img.scale;
    img.height=img.image.height*img.scale;
  }

  // render all idols
  renderAll();

  // listen for mouse events
  $iCanvas.mousedown(onMouseDown);
  $iCanvas.mouseup(onMouseUp);
  $iCanvas.mouseout(onMouseUp);
  $iCanvas.mousemove(onMouseMove);

}

// flood fill canvas and 
// redraw all idols in their assigned positions
function renderAll() {
  ctx.fillRect(0,0,canvas.width,canvas.height);
  
  var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
  grd.addColorStop(0, "#fade57");
  grd.addColorStop(1, "#51aae2");
  //grd.addColorStop(2, "#fc706f");
  //#56cc8f

  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  for(var i=0;i<idols.length;i++){
    var r=idols[i];
    ctx.drawImage(r.image,r.x,r.y,r.width,r.height);
    //if(r.isDragging)
    //{
       ...