JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<canvas id="SetupImageCanvas"
  width="450"
  height="350"
  style="border:1px solid #c3c3c3;"
>
Your browser does not support the HTML5 canvas tag.
</canvas>
<BR>
<input type="text" name="txtPatchCount" id="txtPatchCount" value="2" size="2">
<div class="ck-button">
  <label>
    <input type="checkbox" id="btnROI" value="ROI">
    <span>ROI</span>
  </label>
</div>
<div class="ck-button">
  <label>
    <input type="checkbox" id="btnLAYER" value="LAYER">
    <span>LAYER</span>
  </label>
</div>
    
    <div class="ck-button">
  <label>
    <input type="checkbox" id="btnMetrics" value="Metrics">
    <span>Metrics</span>
  </label>
</div>
<div id="MouseCoords"></div>

CSS

hr{margin:0px; padding:0px;}
form, table {display:inline; margin:0px; padding:0px;}

.ck-button {
    margin:4px;
    background-color:#8080FF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}
.ck-button:hover {
    background-color:#B2B2FF;
}
.ck-button label {
    float:left;
    width:4.0em;
}
.ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}
.ck-button label input {
    position:absolute;
    top:-20px;
}
.ck-button input:checked + span {
    background-color:#0000FF;
    color:white;
}

JavaScript

var oImageBuffer = document.createElement('img');
  var oCanvas=document.getElementById("SetupImageCanvas");
  var o2DContext=oCanvas.getContext("2d");
  var oRect = {};
  var oROI = {};
var oMetrics ={};
  var oLayers = new Array();
  var bDragging = false;
  var bSetROI = false;
  var bSetLayers = false;
  InitMouseEvents();
  var oSelect = document.getElementById("ImageList");
  oSelect.onchange=function() {
    changeCanvasImage(oSelect[oSelect.selectedIndex].value);
  }
   
  $(function() {
    $( "#SetupImageCanvas" ).resizable();
  });

  // Canvas event handlers (listeners).
  function InitMouseEvents() {
    oCanvas.addEventListener('mousedown', MouseDownEvent, false);
    oCanvas.addEventListener('mouseup', MouseUpEvent, false);
    oCanvas.addEventListener('mousemove', MouseMoveEvent, false);
    oCanvas.addEventListener('mouseout', MouseOutEvent, false);
  }
  function MouseDownEvent(e) {
    oRect.startX = e.pageX - this.offsetLeft;
    oRect.startY = e.pageY - this.offsetTop;
    bDragging = true;
  }
  function MouseUpEvent() {
    bDragging = false;
  }
  function MouseOutEvent() {
    document.getElementById("MouseCoords").innerHTML="";
  }
  function MouseMoveEvent(e) {
    if (bDragging) {
      oRect.w = (e.pageX - this.offsetLeft) - oRect.startX;
      oRect.h = (e.pageY - this.offsetTop) - oRect.startY;
      oCanvas.getContext('2d').clearRect(0,0,oCanvas.width, oCanvas.height);
      
        var oROI = document.getElementById("btnROI");
      if (oROI.checked) {
        SetROI();
      }
      var oLayer = document.getElementById("btnLAYER");
      if (oLayer.checked) {
        SetLayer();
      }
   			
	      var oMetrics = document.getElementById("btnMetrics");
          if (oMetrics.checked) {
            SetMetrics();
          }
    }

    if (bSetROI) {
      DrawROI();
    }
      
    if (bSetLayers) {
      DrawLayers();
    }
      
     if(bSetMetrics){
        DrawMetrics();
       
    }
    // Display the current mouse...