JSFiddle - React, Tailwind, and code Playground

by hustlerinc

HTML

<!DOCTYPE HTML>
<html>
<body onload="init();">
<canvas id="viewport" width="480" height="320"></canvas>
</body>
</html>

CSS

html,body{width:100%;height:100%;margin:0px;}

#viewport{border:0px;margin:5px 10px;}

JavaScript

var viewport = document.getElementById('viewport');
var ctx = viewport.getContext('2d');
console.log(ctx);
var fps = 30;


function init(){
    drawSky();
    drawStars();
    drawMoon();
    drawBuildings();
}

function drawSky() {
    var skyGradient = ctx.createLinearGradient(0, 0, 0, viewport.height);
    skyGradient.addColorStop(0, '#192953');
    skyGradient.addColorStop(1, '#085475');
    ctx.fillStyle = skyGradient;
    ctx.fillRect(0, 0, viewport.width, viewport.height);
}

function drawMoon(){
    var X = 60;
    var Y = 60;
    var radius = 50;
    ctx.fillStyle = '#E2E8E7';
    ctx.beginPath();
    ctx.arc(X, Y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

function drawStars(){
    for(i=0;i<750;i++){
    var X = Math.floor(Math.random() * viewport.width);
    var Y = Math.floor(Math.random() * viewport.height);
    var radius = Math.floor(Math.random() * 2);
    ctx.fillStyle = '#B4F1FB';
    ctx.beginPath();
    ctx.arc(X, Y, 1, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    }
}