JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<canvas id="myCanvas" style="z-index: 1; position:absolute; left:0px; top:0px;" width="1280" height="736">Sorry, your browser doesn't support Canvas element.</canvas>

JavaScript

var simulation = {
  init: function() {
    this.outputcanvas = document.getElementById("myCanvas");
    this.control = new control(this.outputcanvas, this.getResratio, this.test1, this.test2);

    this.initCanvas();
    this.createEventListeners();
  },

  initCanvas: function() {
    this.outputcanvas.width = this.outputcanvas.scrollWidth;
    this.outputcanvas.height = this.outputcanvas.scrollHeight;
  },

  createEventListeners: function() {
    this.outputcanvas.addEventListener('mousemove', this.control.onmove.bind(this.control, event), false);
  },

  getResratio: function() {
    return 1;
  },

  getOutputcanvas: function() {
    return this.outputcanvas;
  },

  test1: function() {
    console.log("inside bounding box");
  },

  test2: function() {
    console.log("outside bounding box");
  }
};

function control(outputCanvas, resRatioCallback, callback1, callback2) {
  var _this = this;
  _this.outputcanvas = null;
  _this.resRatioCallback = null;
  _this.callback1 = null;
 	_this.callback2 = null;

  var init = function() {
  	_this.outputcanvas = outputCanvas;
  	_this.resRatioCallback = resRatioCallback;
  	_this.callback1 = callback1;
 		_this.callback2 = callback2;
  }

  this.onmove = function(evt) {
    var mousePos = getMousePos(_this.outputcanvas, event, _this.resRatioCallback());
    
    if (isMouseInArea(mousePos.x, mousePos.y, 10, 10, 10, 10)) {
      // call simulation function
      _this.callback1();
    } else {
      // call simulation function
      _this.callback2();
    }
    
    //console.log(this, evt);
  }

init();
}

$(document).ready(function() {
  simulation.init();
});

function getMousePos(canvas, evt, resratio) {
	var rect = canvas.getBoundingClientRect();
  return {
    x: (evt.clientX - rect.left) * resratio,
    y: (evt.clientY - rect.top) * resratio
  };
}

function isMouseInArea(mouseX, mouseY, boundingBoxX, boundingBoxY, boundingBoxW, boundingBoxH) {
  if (mouseX >= (boundingBoxX - boundingBoxW / 2) && mouseX <...