JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas2"
  width="450"
  height="450"
  style="border:2px solid black">

Your browser does not support the HTML5 canvas tag.
</canvas>
<div class="ck-button">
    <input type="checkbox" id="btnROI" value="ROI" onclick="CallRoi()">
    <span>Rectangle</span>
	


  <input type="text" id="XCoordinate" value="" >
    <span>Upper Left</span>
  <input type="text" id="YCoordinate" value="" >
    <span>Lower Right</span>

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;
}
   #container2 {
        position: relative;
    }

    #canvas2 {
        border: 1px solid #000;
    }

JavaScript

// holds all our boxes
    var boxes2 = [];

    // New, holds the 8 tiny boxes that will be our selection handles
    // the selection handles will be in this order:
    // 0  1  2
    // 3     4
    // 5  6  7
    var selectionHandles = [];

    // Hold canvas information
    var canvas;
    var ctx;
    var WIDTH;
    var HEIGHT;
    var INTERVAL = 20;  // how often, in milliseconds, we check to see if a redraw is needed

    var isDrag = false;
    var isResizeDrag = false;
    var isCreationDrag = false;
    var expectResize = -1; // New, will save the # of the selection handle if the mouse is over one.
    var mx, my, startMx, startMy; // mouse coordinates

    // when set to true, the canvas will redraw everything
    // invalidate() just sets this to false right now
    // we want to call invalidate() whenever we make a change
    var canvasValid = false;

    // The node (if any) being selected.
    // If in the future we want to select multiple objects, this will get turned into an array
    var mySel = null;

    // The selection color and width. Right now we have a red selection with a small width
    var mySelColor = '#CC0000';
    var mySelWidth = 2;
    var mySelBoxColor = 'darkred'; // New for selection boxes
    var mySelBoxSize = 6;

    // we use a fake canvas to draw individual shapes for selection testing
    var ghostcanvas;
    var gctx; // fake canvas context

    // since we can drag from anywhere in a node
    // instead of just its x/y corner, we need to save
    // the offset of the mouse when we start dragging.
    var offsetx, offsety;

    // Padding and border style widths for mouse offsets
    var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;


    // Box object to hold data
    function Box2() {
        this.x = 0;
        this.y = 0;
        this.w = 1; // default width and height?
        this.h = 1;
        this.fill = '#444444';
        this.isROI = false;
    }

    // New methods on the Box class
   ...