JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html style="height:100%">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test</title>
	<style>
		body {
			height: 100%;
			margin: 0;
		}

		canvas {
			border: 1px dotted gray;
			margin: 0;
		}

		button {
			width: 100px;
		}

		div {
			padding: 0;
		}
	</style>
</head>

<body>
	<div>
		<div>
			<canvas height='360' width='480' id='canvasForward'></canvas>
			<canvas height='360' width='480' id='canvasSide'></canvas>
		</div>
		<div>
			<canvas height='360' width='480' id='canvasTop'></canvas>
			<canvas height='360' width='480' id='canvasIso'></canvas>
		</div>
	</div>
	<div>
		<button onclick="worker.start()">Start</button>
		<button onclick="worker.stop()">Stop</button>
	</div>
	<div>
	</div>
	<div id="debug"></div>
	<div id="append"></div>
</body>
<script type="text/javascript">
	function debugLog(argument) {
		document.getElementById("debug").innerHTML = argument;
	}
	let appendTimeout;
	let toAppend = '';
	function debugAppend(argument) {
		clearTimeout(appendTimeout);
		toAppend += argument + '<br/>';
		appendTimeout = setTimeout(function () {
			document.getElementById("append").innerHTML += toAppend;
			toAppend = '';
		}, 500);
	}

	class Canvas {
		constructor(id, label, axisSelectorX, axisSelectorY) {
			const self = this;
			this.id = id;
			this.label = label;
			this.canvas = document.getElementById(id);
			this.ctx = this.canvas.getContext('2d');
			this.axisSelectorX = axisSelectorX;
			this.axisSelectorY = axisSelectorY;

			this.canvasHeight = this.canvas.offsetHeight;
			this.canvasWidth = this.canvas.offsetWidth;

			this.initialY = this.canvasHeight / 2;
			this.initialX = this.canvasWidth / 2;

			this.traceCounter = 0;
			this.maxTraces = 50;
			this.traces = {};

			const axisSize = 150;
			this.axisVectors = [
				[
					new Vector(-axisSize, -axisSize, -axisSize),
					new Vector(-axisSize, -axisSize, axisSize)
				],
				[
					new...