JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id="myCanvas" width="1280" height="800" style="background-color: rgba(20,20,20,0.01)"></canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function drawSky() {
    /* draw the sky */
    context.beginPath();
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = '#A9D8EB';
    context.fill();
    context.beginPath();
    context.rect(0, 0, canvas.width, canvas.height - 300);
    context.fillStyle = '#9DCCDF';
    context.fill();
    context.beginPath();
    context.rect(0, 0, canvas.width, canvas.height - 500);
    context.fillStyle = '#8DC0D4';
    context.fill();
    /* end of sky */
}

function drawCloud(cloudType, mult, x, y, stretchX) {
    /*draw a cloud */
    if (cloudType === 1) {
        context.beginPath();
        context.rect(5 * mult + x, 0 * mult + y, mult * stretchX, mult);
        context.rect(6 * mult + x, 0 * mult + y, mult * stretchX, mult);
        context.rect(4 * mult + x, 1 * mult + y, mult * stretchX, mult);
        context.rect(5 * mult + x, 1 * mult + y, mult * stretchX, mult);
        context.rect(6 * mult + x, 1 * mult + y, mult * stretchX, mult);
        context.rect(7 * mult + x, 1 * mult + y, mult * stretchX, mult);
        context.rect(8 * mult + x, 1 * mult + y, mult * stretchX, mult);
        context.rect(1 * mult + x, 2 * mult + y, mult * stretchX, mult);
        context.rect(2 * mult + x, 2 * mult + y, mult * stretchX, mult);
        context.rect(3 * mult + x, 2 * mult + y, mult * stretchX, mult);
        context.rect(4 * mult + x, 2 * mult + y, mult * stretchX, mult);
        context.rect(5 * mult + x, 2 * mult + y, mult * stretchX, mult);
        context.rect(7 * mult + x, 2 * mult + y, mult * stretchX, mult);
        context.rect(0 * mult + x, 3 * mult + y, mult * stretchX, mult);
        context.rect(1 * mult + x, 3 * mult + y, mult * stretchX, mult);
        context.rect(2 * mult + x, 3 * mult + y, mult * stretchX, mult);
        context.rect(4 * mult + x, 3 * mult + y, mult * stretchX, mult);
        context.fillStyle = '#f2f2f2';
       ...