JSFiddle - React, Tailwind, and code Playground

by Brandon Semilla

HTML

<div style="font-family: Lato">&nbsp;</div>

CSS

body {
    margin: 0;
    background-color: #000;
}
body, div, p, a, canvas {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.absolute-center {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
/* latin-ext */
 @font-face {
    font-family:'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
 @font-face {
    font-family:'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

JavaScript

function main() {
    // Define player object and statistics
    var player = {};
    player.life = 61;
    player.defense = 45;
    player.agility = 33;
    player.intellect = 69;
    player.power = 42;
    // Array that takes information from the player object to get the order
    // in which stats are displayed onscreen. Change the order in which
    // the player stats are defined to change order.
    var statOrder = [];
    for (var i in player) statOrder.push(i);
    // Define colors. I used simple three-digit hex colors, in this case.
    var statColors = {};
    statColors.life = "#339933";
    statColors.defense = "#333399";
    statColors.agility = "#999933";
    statColors.intellect = "#993399";
    statColors.power = "#993333";

    // Define pentagon (or other polygon) size and coordinates.
    var polygonX = 240;
    var polygonY = 240;
    var polygonSize = 120;
    // Define size of circles.
    var circleSize = 56;
    var circles = [];
    var circleIndexes = [];
    for (var i in statColors) circleIndexes.push({
        defaultColor: statColors[i],
        color: statColors[i],
        over: false
    });

    var innerPolygonColor = statColors.life;
    var innerPolygonKnobs = [];
    for (var i in statColors) innerPolygonKnobs.push({
        over: false
    });

    // Function for adding elements to screen. Code is reusable.
    function appendElement(type, properties, parent) {
        if (parent === undefined) parent = document.body;
        var element = document.createElement(type);
        for (var i in properties) {
            element.setAttribute(i, properties[i]);
        }
        parent.appendChild(element);
        return element;
    }
    // Place canvas object centered in the screen.
    var canvas = appendElement("canvas", {
        width: "480",
        height: "480",
        class: "absolute-center",
    });
    // Get canvas context.
    var ctx = canvas.getContext("2d");

    String.prototype.toRGB = function () {
       ...