JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Drawing App </title>

	<script>
	// -- HTML 5 canvas
	var
	  canvas,
	  ctx,
	  redrawCon,
	  sampleCount;

	// -- drawing
	var
	  newPathFlag = 0,
	  endPathFlag = 0,
	  newXYFlag   = 0,
	  mouseX      = 0,
	  prevMouseX  = 0,
	  mouseY      = 0,
	  prevMouseY  = 0,
	  pointArr    = [], 
	  pathString  = 0,
	  clickCount  = 0,
	  drawOptionFlag = 0,
	  timeDelay      = 2,
	  currCount      = timeDelay,
	  pObj           = "",
	  rcXYString     = "";

	  var 
	  colorBoxArr    = [];

	  // -- mouse event
	  var
	  eventObj;

	  // -- shape flag
	  var 
	  drawSquare = 0,
	  drawTri    = 0;

	  // -- state
	  var 
	  drawState  = 0,
	  currObj    = "";

	  /* ===============================================
	  * Box type attributes indicates square, triangle, or circle.
	    These are geometric shapes.

	    Draw state of 'g' will refer to one of these geometric shapes
	    Draw state of 'c' will pick a color
	  * ================================================ */

	/* ====================================
	* Trapezoid Shape
	*
	* ====================================== */
 

	// -- Triangle Shape
	class TriangleShape
	{
		constructor()
		{
			this.xPos    = 0;
			this.yPos    = 0;
			this.sWidth  = 50;
			this.sHeight = 50;

			this.moveToString = " ";
			this.lineToString = " ";
			this.pathString   = " ";
		}

		update_state( posX, posY )
		{
			this.xPos = posX;
			this.yPos = posY;

			this.moveToString = "M " + this.xPos + " " + this.yPos + " ";
			this.lineToString = "L " + (this.xPos + this.sWidth+20) + " " + (this.yPos + this.sHeight) + " L " + (this.xPos - this.sWidth) + " " + (this.yPos + this.sHeight);

			this.pathString = this.moveToString + this.lineToString + " Z ";

		}

	}


	/* ===========================================
	* Square Shape
	*
	* ============================================ */






	// -- ColorBox
	class ColorBox
	{
		constructor( typeCode, colorCode, indexR, indexC, spacing...