JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <canvas id="layer2" style="z-index: 2;" width="600" height="600">No canvas support</canvas>
  <canvas id="layer1" style="z-index: 1;" width="600" height="600">No canvas support</canvas>
</div>
<div id="status"></div>
<div id="syllogismMet"></div>
<div id="barbaraArray"></div>
<div id="array"></div>
<div id="menCircle"></div>
<div id="mortalCircle"></div>
<div id="greeksCircle"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.wrapper {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0px auto;
}

.wrapper canvas {
  position: absolute;
  top: 0;
}

JavaScript

var layer1 = document.getElementById('layer1');
 var layer2 = document.getElementById('layer2');
 var context1 = layer1.getContext('2d');
 var context2 = layer2.getContext('2d');
 var canvasWidth = layer1.width;
 var canvasHeight = layer1.height;
 var dragId;
 var dragOffsetX;
 var dragOffsetY;
 var drag = false;
 var font = '20pt san-serif';
 var fontHeight = 20;
 var majorPremiseMet;
 var minorPremiseMet;
 var circlesNeeded = 3;
 var correctSyllogism;
 var blankSyllogism;
 var majorPremise;
 var minorPremise;

 var circlesArray = new Array();
 var Circle = function(x, y, radius) {
   this.x = x; //Centre of the circle
   this.y = y; //Centre of the circle
   this.radius = radius;
 };

 var staticTextArray = [];
 var movableTextArray = [];
 var clickedInArray = [];
 var moveText;

 $(window).mousedown(function(e) {
   var pos = getMousePos(layer1, e);
     whichCircleClickedIn(pos.x, pos.y);
     checkIfSyllogismIsMet();
     checkIfAnyPropositionsAreMet();
 });
 $(window).mouseup(function(e) {
   drag = false;
   moveText = false;
   dragId = -1;
 })

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

 function main(level) {
   createCircles();
   drawCircles();
 }

 function circleEdgeClicked(x, y) {
   var color = new Uint32Array(context1.getImageData(x, y, 1, 1).data.buffer)[0];
   return (color << 8) === 0xff00;
 }

 function whichCircleClickedIn(x, y) {
   var fillColorR = 230,
     fillColorG = 200,
     fillColorB = 50;


   if (circleEdgeClicked(x, y)) {
     return false;
   }


   var tempArray = new Array();
   //loops through circles and adds all circles clicked in to a temp array
   for (var i = 0; i < circlesArray.length; i++) {
     var circle = circlesArray[i];
     var distanceSquared = (x - circle.x) * (x - circle.x) + (y - circle.y) * (y - circle.y);
     if (distanceSquared <= circle.radius * circle.radius) {
      ...