JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="400"></canvas>

JavaScript

const c = document.getElementById("canvas"); //Grab canvas element to use as object
const ctx = c.getContext('2d'); //Function that enable the 2d functions of Canvas API
draw();
function draw() {
    //sky
    background(172, 238, 247);
    //ground
    fill(95, 156, 83);
    rect(0, 350, 400, 50);
}
function background(red,green,blue) {
	ctx.fillStyle = 'rgb('+red+','+green+','+blue+')'; //Parsing the functions passed variables to be used for the ctx fillStyle rgb values
	ctx.fillRect(0,0,c.width,c.height); //Makes a rectangle the size of the canvas
}
function fill(red,green,blue) {
	ctx.fillStyle = 'rgb('+red+','+green+','+blue+')';
}
function rect(x1,x2,y1,y2) { //Bad idea to use numbers in variable names but eh
	ctx.fillRect(x1,x2,y1,y2); //Draws a rectangle using ctx
}