JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
#header {
	height: 100px;
	margin: 0;
	padding: 0;
	background-color: black;
	position: relative; /* to allow canvas overlay */
}
#grass { /* to allow canvas overlay */
	left: 0;
	position: absolute;
	z-index: 50;
}
</style>
</head>
<body>
<div id='header'></div> 
<script type='text/javascript'>var w = window, d = document, thisOverlay = 'header', thisDay = 7, thisMonth = 3, thisDoy = 66;</script>
</body>
</html>

JavaScript

// Original version http://labs.hyperandroid.com/js1k
// 2019 MD: Modified for being an transparent overlay on top of HTML id "thisOverlay"
// w, d, thisOverlay, thisDay, thisMonth, thisDoy are set from the initiating HTML/PHP file

var grassId = "grass";
var callbackId = null;
var canvas = null;
var ctx = null;
var garden = null;
var gradient;

var grassBaseColor;
var grassSizeFactor;

var allColors = {
	60: "00FF00",
	64: "07FD01",
	69: "0EFB02",
	73: "15F903",
	77: "1CF704",
	82: "22F506",
	86: "29F307",
	91: "2FF208",
	95: "35F009",
	99: "3BEE0A",
	104: "41EC0B",
	108: "47EA0C",
	112: "4CE80D",
	117: "52E70E",
	121: "57E50F",
	125: "5CE310",
	130: "61E111",
	134: "66DF12",
	138: "6ADD13",
	143: "6FDC14",
	147: "73DA15",
	152: "77D816",
	156: "7CD617",
	160: "80D418",
	165: "83D218",
	169: "87D019",
	173: "8BCF1A",
	178: "8ECD1B",
	182: "91CB1B",
	186: "94C91C",
	191: "97C71D",
	195: "9AC51E",
	200: "9DC41E",
	204: "A0C21F",
	208: "A2C020",
	213: "A5BE20",
	217: "A7BC21",
	221: "A9BA21",
	226: "ABB922",
	230: "ADB723",
	234: "AFB523",
	239: "B1B324",
	243: "B1B024",
	247: "AFAB25",
	252: "ADA625",
	256: "ACA126",
	261: "AA9C26",
	265: "A89826",
	269: "A69327",
	274: "A48E27",
	278: "A28A28",
	282: "A18628",
	287: "9F8128",
	291: "9D7D28",
	295: "9B7929",
	300: "997529",
	304: "977229",
	309: "966E29",
	313: "946A2A",
	317: "92672A",
	322: "90632A",
	326: "8E602A",
	330: "8C5D2A",
	335: "8B5A2B"
};

(function() {
	Grass = function() {
		return this;
	};

	Grass.prototype = {
			alto_hierba:          0,    // grass height
			maxAngle:             0,    // maximum grass rotation angle (wind movement)
			angle:                0,    // construction angle. thus, every grass is different to others
			coords:               null, // quadric bezier curves coordinates
			color:                null, // grass color. modified by ambient component
			offset_control_point: 3,    // grass base width. greater values, wider at the basement

		initialize :...