JSFiddle - React, Tailwind, and code Playground

HTML

<div id="layout-content"></div>

JavaScript

var width = 500;//FIXME:size.w;
	var height = 500;//FIXME:size.h;
	
	var canvas = document.createElement("canvas");
	//canvas.className="singleUserCanvas";
	canvas.width=width;
	canvas.height=height;
	canvas.border = "3px solid #999999";
	canvas.bgcolor = "#999999";
	canvas.margin = "(0, 2%, 0, 2%)";
	
	var context = canvas.getContext("2d");
	
	//////////////////
	////  SHAPES  ////
	//////////////////
	
	var left = 0;
	
	//draw zone 1 rect
	context.fillStyle = "#8bacbe";
	context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);
	
	left = left + canvas.width*1.5/8.5;
	
	//draw zone 2 rect
	context.fillStyle = "#ffe381";
	context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);
	
	left = left + canvas.width*2.75/8.5 + 1;
	
	//draw zone 3 rect
	context.fillStyle = "#fbbd36";
	context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
	
	left = left + canvas.width*1.25/8.5;
	
	//draw target zone rect
	context.fillStyle = "#004880";
	context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);
	
	left = left + canvas.width*0.25/8.5;
	
	//draw zone 4 rect
	context.fillStyle = "#f8961d";
	context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
	
	left = left + canvas.width*1.25/8.5 + 1;
	
	//draw zone 5 rect
	context.fillStyle = "#8a1002";
	context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);
	
	////////////////
	////  TEXT  ////
	////////////////
	
	//user name
	context.fillStyle = "black";
	context.font = "bold 18px sans-serif";
	context.textAlign = 'right';
	context.fillText("User Name", canvas.width, canvas.height*.05);
	
	//AT:
	context.font = "bold 12px sans-serif";
	context.fillText("AT: 140", canvas.width, canvas.height*.1);
	
	//AB:
	context.fillText("AB: 94", canvas.width, canvas.height*.15);

var parent = document.getElementById("layout-content");

	 ...