JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="default.css"/>
</head>

<body>

<canvas id="canMain" width="640" height="400">no canvas? shucks.</canvas>

<script type="text/javascript" src="geo.js">noscript</script>

</body>
</html>

CSS

body {
    margin: 0px;
}

canvas {
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

JavaScript

//globals
var can;
var con;
var zoomFactor = 1;

var earth_crust_radius = 6401;
var earth_crust_color = "black";

var earth_mantleUpper_radius = 6371;
var earth_mantleUpper_color = "yellow";

var earth_mantleLower_radius = 5651;
var earth_mantleLower_color = "orange";

var earth_coreOuter_radius = 3480;
var earth_coreOuter_color = "red";

var earth_coreInner_radius = 1221;
var earth_coreInner_color = "white";




//let's get retarded in here
function init(canName) {
    var version = "0.0";
    document.title = version;

    //prep canvas
    can = document.getElementById(canName);
    if(can.getContext) {
        con = can.getContext("2d");
        //can.width = 160;
        //can.height = 100;
        //~ return setInterval(drawloop, 40); //set 25fps
        return drawloop();
    } else {
        throw("derp");
        return -1;
    }
}


function drawloop() {
    //bachelors in arts = do nothing
    t_drawsquares();

    t_setZoomFactor(earth_crust_radius);

    t_drawShellAtCenter(earth_crust_radius, earth_crust_color);
    t_drawShellAtCenter(earth_mantleUpper_radius, earth_mantleUpper_color);
    t_drawShellAtCenter(earth_mantleLower_radius, earth_mantleLower_color);
    t_drawShellAtCenter(earth_coreOuter_radius, earth_coreOuter_color);
    t_drawShellAtCenter(earth_coreInner_radius, earth_coreInner_color);

    t_drawAllShells();
}






//test functions
function t_drawsquares() {
    con.fillStyle = "rgba(200,0,0,0.5)";
    con.fillRect (10, 10, 55, 50);

    con.fillStyle = "rgba(0,0,200,0.5)";
    con.fillRect (30, 30, 55, 50);
}

function t_drawShellAtCenter(radiusInKM, color) {
    var radius = radiusInKM*zoomFactor; //eventually should = input*zoomFactor

    con.fillStyle = color;

    con.beginPath;
    con.moveTo(can.width/2 +radius, can.height/2);
    con.arc(can.width/2, can.height/2, radius, 0, 2*Math.PI, false);
    con.fill();

    con.closePath();
}

function t_setZoomFactor(planetRadius) {
    var viewRadius = can.height / 2;
    var...