JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function scaleCanvas(canvas, width, height) {

  // Get pixel ratio.
  const dpr = window.devicePixelRatio;

  width = Math.ceil(width * dpr);
  height = Math.ceil(height * dpr);

  // Set the canvas resolution dimensions (integer values).
  canvas.width = width;
  canvas.height = height;

  /*-----------------------------------------------------------
                         - KEY STEP -
   Set the canvas layout dimensions with respect to the canvas
   resolution dimensions. (Not necessarily integer values!)
   -----------------------------------------------------------*/
  canvas.style.width = `${width / dpr}px`;
  canvas.style.height = `${height / dpr}px`;

  // Adjust canvas coordinates to use CSS pixel coordinates.
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
}

var width = 500; //FIXME:size.w;
var height = 500; //FIXME:size.h;
var canvas = document.createElement("canvas");

scaleCanvas(canvas, width, height);
/* window.addEventListener('resize', () => scaleCanvas(canvas, width, height)); */

//canvas.className="singleUserCanvas";
/* canvas.width = width; */
/* canvas.height = height; */
canvas.style.border = "3px solid #999999";
canvas.style.boxSizing = 'border-box'
canvas.style.bgcolor = "#999999";
canvas.style.margin = "(0, 2%, 0, 2%)";

var context = canvas.getContext("2d");

//////////////////
////  SHAPES  ////
//////////////////

var left = 0;

//draw zone 1 rect
context.fillStyle = "#8bacbe";
context.fillRect(0, (height * 5 / 6) + 1, width * 1.5 / 8.5, height * 1 / 6);

left = left + width * 1.5 / 8.5;

//draw zone 2 rect
context.fillStyle = "#ffe381";
context.fillRect(left + 1, (height * 5 / 6) + 1, width * 2.75 / 8.5, height * 1 / 6);

left = left + width * 2.75 / 8.5 + 1;

//draw zone 3 rect
context.fillStyle = "#fbbd36";
context.fillRect(left + 1, (height * 5 / 6) + 1, width * 1.25 / 8.5, height * 1 / 6);

left = left + width * 1.25 / 8.5;

//draw target zone rect
context.fillStyle = "#004880";
context.fillRect(left + 1, (height...