JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas {
  width: 100%;
  height: 100px;
}

JavaScript

// Read https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas

var userValue = 11.59/(8.25)/2;
var modelValue = 8.25/(8.25)/2;
var sd = 1.22/(8.25);

/*
var userValue = 0.34/(0.38)/2;
var modelValue = 0.38/(0.38)/2;
var sd = 0.3/(0.38)/2;
*/

//console.log({userValue}, {modelValue}, {sd})

var redBelow = {
	max: ((modelValue-1.5*sd) < 0) ? 0 : (modelValue-1.5*sd)
}

var yellowBelow = {
	min: ((modelValue-1.5*sd) < 0) ? 0 : (modelValue-1.5*sd),
	max: ((modelValue-1*sd) < 0) ? 0 : (modelValue-1*sd)
}

var green = {
	min: ((modelValue-1*sd) < 0) ? 0 : (modelValue-1*sd),
  mid: 0.5,
	max: ((modelValue + 1*sd) > 1) ? 1 : (modelValue + 1*sd)
}

var yellowAbove = {
	min: ((modelValue + 1*sd) > 1) ? 1 : (modelValue + 1*sd),
	max: ((modelValue + 1.5*sd) > 1) ? 1 : (modelValue + 1.5*sd)
}

var redAbove = {
	min: ((modelValue + 1.5*sd) > 1) ? 1 : (modelValue + 1.5*sd)
}

var color = {
green: "#66B032",
yellow_green: "#B2D732",
yellow: "#FEFE33",
yellow_orange: "#FCCC1A",
orange: "#FB9902",
red_orange: "#FC600A",
red: "#FE2712"
}


var c = document.getElementById("myCanvas");
c.width=1000;
c.height=150;

var ctx = c.getContext("2d");

var percent = 10;
var indicatorPos = c.width * (userValue);
var grd = ctx.createLinearGradient(0, 0, c.width, 0);


grd.addColorStop(0, color.red);
grd.addColorStop(redBelow.max, color.red_orange);

//grd.addColorStop(0.1, color.red_orange);
//grd.addColorStop(0.35, color.yellow_orange);

grd.addColorStop(yellowBelow.min, color.yellow_orange);
grd.addColorStop(yellowBelow.max, color.yellow);

//grd.addColorStop(0.40, color.yellow_green);
grd.addColorStop(green.min, color.yellow_green);
grd.addColorStop(green.mid, color.green);
grd.addColorStop(green.max, color.yellow_green);

grd.addColorStop(yellowAbove.min, color.yellow);
grd.addColorStop(yellowAbove.max, color.yellow_orange);

grd.addColorStop(redAbove.min, color.red_orange);
grd.addColorStop(1, color.red);

//grd.addColorStop(0.575,...