JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://bpreminders.com/scripts/layout/base-1.5.js"></script>
<div id="image-container" class="image-preview-container">

</div>

CSS

html, body{ 
	background: #2B333A;
	width:100%;
	height:100%; 
}
.image-preview-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    flex-grow: 1;
}
.canvas-layer:first-child {
    background: #e6e7e8;
}
.canvas-layer {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}
.canvas-layer.pen-layer{ 
	pointer-events:none; 
}

JavaScript

/*
	CanvasPanel

	this will create a canvas panel that can
	add shapesthat can be drawn, add and remove
	drawing layers, use tools to work with the
	layers and shapes. this is the abstract
	class that should be extended.
*/
var CanvasPanel = function(container)
{
	this.number = (typeof CanvasPanel.number === 'undefined') ? CanvasPanel.number = 0 : (++CanvasPanel.number);
	this.id = 'canvas_panel_' + this.number;
	this.fps = 60;

	this.mouse = { x: 0, y: 0, status: 'up' };
	this.layer = null;

	this.startColor = '#00AEEF';
	this.color = this.startColor;

	this.targetSize = { width: 400, height: 400 };

	/* this will allow the canvas to animate
	and stop when done */
	this.status = 'stopped';
	this.timer = null;

	this.container = container;
};

CanvasPanel.prototype = 
{
	constructor: CanvasPanel,

	/* this will setup the grid layer by creating the canvas,
	 resizing the canvas, and drawing the grid */
	setup: function()
	{
		/* this will setup the object controllers  */
		this.setupPanel();

		if (this.layer === null)
		{
			var layer = this.addLayer('main', 'base-canvas');
			this.selectLayer(layer);
		}

		this.setupEvents();

		/* we want to resize the layer and draw the
		grid, labels, and values */
		this.resize();
		this.draw();
	},

	remove: function()
	{
		this.removeEvents();
		this.stopTimer();
		this.layers.removeAll();
		this.shapes.removeAll();
	},

	/* this will adda new layer.
	@param (string) label = this can be used to select
	@param (string) type = this will be added to the element
	class
	@param (bool) clearEachFrame = this will check to reset on
	draw
	@return (object) the layer */
	addLayer: function(label, type, clearEachFrame)
	{
		var layer = this.layers.add(this, this.container, label, type, clearEachFrame);
		return layer;
	},

	addGridLayer: function(label, type, period)
	{
		var layer = new GridLayer(this, this.container, label, null, period);
		this.layers.objects.push(layer);
		return layer;
	},

	setupLayers: function()
	{
		/* we...